协慌网

我有以下场景：

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 。

关于我缺少的任何想法？

您必须将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/

使用 [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