我有以下场景:
var el = 'li';
页面上有5个 <li>
,每个都有一个 data-slide=number
属性(数字分别为1,2,3,4,5) .
我现在需要找到当前活动的幻灯片编号,该编号映射到 var current = $('ul').data(current);
并在每次幻灯片更改时更新 .
到目前为止,我的尝试都没有成功,尝试构建与当前幻灯片匹配的选择器:
$('ul').find(el+[data-slide=+current+]);
不匹配/返回任何东西......
我无法对 li
部分进行硬编码的原因是,这是一个用户可访问的变量,如果需要可以更改为其他元素,因此它可能并不总是 li
.
关于我缺少的任何想法?
9 回答
此选择器
$("ul [data-slide='" + current +"']");
将适用于以下结构:虽然这个
$("ul[data-slide='" + current +"']");
适用于:<ul data-slide="item"><li></li></ul>
我在psycho brm's filterByData extension上改进了jQuery .
如果前一个扩展名在键值对上搜索,则使用此扩展名,您还可以搜索数据属性的存在,而不管其值如何 .
用法:
或小提琴:http://jsfiddle.net/PTqmE/46/
如果您不想输入所有内容,请按以下方式查询数据属性:
仅供参考:http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/
您必须将
current
的值注入Attribute Equals选择器:对于较旧的JavaScript环境(ES5及更早版本):
使用[data-x = ...]进行搜索时,请注意, it doesn't work with jQuery.data(..) setter :
您可以使用此代替:
没有JQuery,ES6
我知道问题是关于JQuery,但读者可能想要一个纯JS方法 .
回到他原来的问题,关于如何在不事先知道元素类型的情况下完成这项工作,以下是:
使用jQuery和data- *属性获取元素时遇到了同样的问题 .
所以供您参考,最短的代码在这里:
这是我的HTML代码:
这是我的jQuery选择器:
我希望这可能会更好
谢谢