jQuery如何根据数据查找元素

2018-06-07 12:06:36

我有以下情况：

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为属性等于选择：

$("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

链接地址: http://www.djcxy.com/p/22951.html

上一篇: jQuery how to find an element based on a data

下一篇: HttpURLConnection: BindException when creating many connections