jQuery如何根据数据属性值查找元素?


993

我有以下情况:

var el = 'li';

并且<li>页面上有5个,每个data-slide=number属性都有一个属性(数字分别为1,2,3,4,5)

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

到目前为止,我的尝试都没有成功,试图构造与当前幻灯片匹配的选择器:

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

不匹配/不返回任何内容...

我无法对该li部分进行硬编码的原因是,这是一个用户可访问的变量,可以根据需要将其更改为其他元素,因此它不一定总是为li

关于我所缺少的任何想法?


6
您确定自己.find(el+[data-slide=+current+]);编写的代码在您的内部吗?看来您错过了一些报价"[data-slide]"
xandy

那就是帮助我选择所有数据属性(无论值如何)的原因:$('*[data-slide]')您可以将其与例如$('*[data-slide]').each( function() { ... });
Kai Noack

Answers:


1481

您必须将的值current注入Attribute Equals选择器:

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

对于较旧的JavaScript环境(ES5和更早版本):

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

8
@Jannis,你可以做$("ul").find(el + "[data-slide='" + current +"']");
弗雷德里克·哈米迪

7
@ c00lryguy,jQuery UI定义了一个,周围有独立的实现。似乎将其添加到jQuery Core的尝试被拒绝了两次
弗雷德里克·哈米迪

6
这个在类似帖子上的答案有一个过滤器功能的示例
drzaus12年

77
我担心如果通过jQuery .data(...)函数添加数据将无法正常工作,因为这并不总是呈现属性,因此soemtimes使用浏览器特定的存储机制。我希望jQuery核心具有数据特定选择器的另一个原因。
AaronLS 2012年

77
请注意,它不适用于使用$('#element')。data('some-att-name',value);设置数据的元素;但仅适用于具有硬编码属性的用户。我遇到了这个问题,并通过直接写入属性$('#element')。attr('data-some-att-name',value);使其工作设置数据。
Pawel

463

如果您不想键入所有内容,这是一种通过data属性进行查询的较短方法:

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

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


31
对于那些关心您的人,给定结构,<ul><li data-slide="item"></li></ul>此答案的选择器将返回undefined,因此在给定用户方案的情况下不起作用。该答案将适用于该结构<ul data-slide="item"><li></li></ul> 虽然我理解为什么它因简洁而受欢迎,但从技术上讲,这是一个错误的答案。jsfiddle.net/py5p2abL/1
akousmata 2014年

4
不要忘记将其视为数组。使用[0]访问第一个元素中找到。
Aminah Nuraini '16

奇怪的副作用...当无效时,此方法将元素与data属性匹配.find("[data-attrib='value']")。我不知道这些值是不是由jQuery添加的数据属性...
错误

1
这并不奇怪,因为这两个答案做了2件事。$.find专门查找该元素的后代,但是在选择器字符串中使用filter语法将仅过滤结果。
菲尔

227

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

1
$.fn.filterByData是辉煌的; 但是,这是对此处复制粘贴的警告...您只需要$('<b>').filterByData('x', 1)使用查找<b>标签data-x="1"。如果您复制粘贴该.data(x, 1)部分,则会data-x在过滤之前将自己设置为“ 1”。
WEBjuju

39

我改进了psycho brm对jQuery 的filterByData扩展

在前一个扩展名搜索键-值对的情况下,使用此扩展名,您还可以搜索数据属性的存在,而不管其值如何。

(function ($) {

    $.fn.filterByData = function (prop, val) {
        var $self = this;
        if (typeof val === 'undefined') {
            return $self.filter(
                function () { return typeof $(this).data(prop) !== 'undefined'; }
            );
        }
        return $self.filter(
            function () { return $(this).data(prop) == val; }
        );
    };

})(window.jQuery);

用法:

$('<b>').data('x', 1).filterByData('x', 1).length    // output: 1
$('<b>').data('x', 1).filterByData('x').length       // output: 1

或提琴:http : //jsfiddle.net/PTqmE/46/


34

没有JQuery,ES6

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

我知道问题是关于JQuery的,但读者可能希望使用纯JS方法。


33

我在使用jQuery和data- *属性获取元素时遇到了相同的问题。

所以供您参考,最短的代码在这里:

这是我的HTML代码:

<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>

这是我的jQuery选择器:

$('section[data-js="carousel"]');
// this will return array of the section elements which has data-js="carousel" attribute.



By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.