我有以下场景:

var el = 'li';

页面上有5个<li>,每个都具有data-slide=number属性(number分别为1、2、3、4、5)。

我现在需要找到当前活动的幻灯片编号,这是映射到var current = $('ul').data(current);并在每次幻灯片更改时更新。

到目前为止,我的尝试一直不成功,试图构造选择器,将匹配当前幻灯片:

$('ul').find(el+[data-slide=+current+]);

不匹配/返回任何东西…

我不能硬编码li部分的原因是,这是一个用户可访问的变量,如果需要,可以将其更改为不同的元素,因此它可能并不总是li。

你知道我错过了什么吗?


当前回答

没有JQuery, ES6

document.querySelectorAll(`[data-slide='${CSS.escape(current)}']`);

我知道这个问题是关于JQuery的,但是读者可能想要一个纯JS方法。

其他回答

你必须将current的值注入到Attribute Equals选择器中:

$("ul").find(`[data-slide='${current}']`)

对于较旧的JavaScript环境(ES5或更早):

$("ul").find("[data-slide='" + current + "']"); 

如果你不想输入所有这些,这里有一个通过数据属性查询的更简单的方法:

$("ul[data-slide='" + current +"']");

仅供参考: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/

没有JQuery, ES6

document.querySelectorAll(`[data-slide='${CSS.escape(current)}']`);

我知道这个问题是关于JQuery的,但是读者可能想要一个纯JS方法。

回到他最初的问题,关于如何在不知道元素类型的情况下工作,下面是这样做的:

$(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");
$("ul").find("li[data-slide='" + CSS.escape(current) + "']");

我希望这可能会更好

谢谢