我有以下场景:
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。
你知道我错过了什么吗?
当前回答
当使用[data-x=…]，注意，它不工作与jQuery.data(..) setter:
$('<b data-x="1">' ).is('[data-x=1]') // this works
> true
$('<b>').data('x', 1).is('[data-x=1]') // this doesn't
> false
$('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true
你可以用这个代替:
$.fn.filterByData = function(prop, val) {
return this.filter(
function() { return $(this).data(prop)==val; }
);
}
$('<b>').data('x', 1).filterByData('x', 1).length
> 1
其他回答
你必须将current的值注入到Attribute Equals选择器中:
$("ul").find(`[data-slide='${current}']`)
对于较旧的JavaScript环境(ES5或更早):
$("ul").find("[data-slide='" + current + "']");
这个选择器(美元“ul(数据=”当前“+ +”“]”);适用于以下结构:
<ul><li data-slide="item"></li></ul>
While this $("ul[data-slide='" + current +"']");适合:
<ul data-slide=“item”><li></li></ul>
当使用[data-x=…]，注意，它不工作与jQuery.data(..) setter:
$('<b data-x="1">' ).is('[data-x=1]') // this works
> true
$('<b>').data('x', 1).is('[data-x=1]') // this doesn't
> false
$('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true
你可以用这个代替:
$.fn.filterByData = function(prop, val) {
return this.filter(
function() { return $(this).data(prop)==val; }
);
}
$('<b>').data('x', 1).filterByData('x', 1).length
> 1
如果你不想输入所有这些，这里有一个通过数据属性查询的更简单的方法:
$("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方法。
