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

jQuery how to find an element based on a data-attribute value?

我有以下场景：

1	var el = 'li';

页面上有5个

，每个都有一个data-slide=number属性(数字分别为1,2,3,4,5)。

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

到目前为止，我的尝试都没有成功，尝试构建与当前幻灯片匹配的选择器：

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

不匹配/返回任何东西......

我无法对li部分进行硬编码的原因是，这是一个用户可访问的变量，如果需要可以更改为不同的元素，因此它可能不总是li。

关于我缺少的任何想法？

相关讨论

我以前必须这样做几次......如果他们有这个功能会很好。我想我会把它添加到#query ...
不错的，现在只是一个更普遍意义上的问题。虽然这对我的例子现在非常有效，但有没有办法可以将我的el变量变成这样的东西？还是只是$("ul").find("+el+"[data-slide='" + current +"']");？
@Jannis，你可以做$("ul").find(el +"[data-slide='" + current +"']");。
注意。这也可以不添加属性。您可以使用$('＃element')。data('blarg'，'Whoop！')添加数据。无需将属性附加到标记本身。
@ mrbinky3000，属性选择器只匹配实际属性，因此我的答案中的代码不能匹配仅调用data("slide", number)的元素(因为data()的setter形式不创建或更新data-属性)。要查找这些元素，您必须使用filter()或其中一个提供:data()选择器的插件。
@Frederic Hamidi - 你知道任何添加:data()选择器的插件吗？
@ c00lryguy，jQuery UI定义了一个，并且有独立的实现。似乎将尝试将其添加到jQuery Core的尝试被拒绝了。两次。
哦，我很高兴我找到了这个 - @FrdricHamidi你已经解决了我在类似帖子中提到的问题
类似帖子的这个答案有一个过滤功能的例子
我担心如果通过jQuery .data(...)函数添加数据，这将不起作用，因为这并不总是呈现属性，因此soemtimes使用浏览器特定的存储机制。我希望jQuery核心有一个特定于数据的选择器的另一个原因。
添加$ .fn.filterByData查询jQuery.data(..)设置的值 - stackoverflow.com/a/15651670/1335996
请注意，它不适用于使用$('＃element')设置数据的元素.data('some-att-name'，value);但仅适用于具有硬编码属性的人。我有这个问题，并通过直接写$('＃element')。attr('data-some-att-name'，value);
供将来参考：情况就是这样，因为attr和prop是两个不同的东西。链接。选择器只能找到attr而.data()使用prop。将数据设置为属性或使用.each()等循环
这兼容IE8吗？
@Fabien，是的，只要你使用jQuery的1.x分支。 (2.x分支不支持旧版浏览器，包括IE8。)
在我的情况下，我需要找到具有特定数据属性值的复选框，考虑到值是唯一的。我使用了一些修改代码：jQuery('input [type ="checkbox"] [class ="unique-checkbox"] [data-value ="{{some unique value}}"]')
如果这对您不起作用，请尝试使用@KevinDeus中的$("ul[data-slide='" + current +"']");回答下面 - 它对我有用。
如果data属性是一个对象(以'{'开头)或数组(以'['开头)，则不起作用;例如：如何选择数据options.name等于"John"的div？
@Amr，一个简单的属性匹配确实起作用(小提琴)。如果您想从data()的对象解析功能中受益，那么它将返回filter()或:data()选择器。
@FrdricHamidi，我尝试使用filter或：data来选择数据集为对象的元素，但没有成功。用data.age选择div的任何线索等于30？
@Amr，这看起来不同，值得我相信另一个问题。来吧问一个(不要忘记发布你的代码)。
救了我的命...谢谢:)
如果我想通过多个属性值找到一个元素，如a1 = v1和a2 = v2，该怎么办？

如果你不想输入所有这些，这里有一个更简单的数据属性查询方式：

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

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

相关讨论

使用[data-x = ...]进行搜索时，请注意，它不适用于jQuery.data(..)setter：

1
2
3
4
5
6
7
8

$('<b data-x="1">' ).is('[data-x=1]') // this works
> true

$('').data('x', 1).is('[data-x=1]') // this doesn't
> false

$('').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true

您可以使用此代替：

1
2
3
4
5
6
7
8

$.fn.filterByData = function(prop, val) {
return this.filter(
function() { return $(this).data(prop)==val; }
);
}

$('').data('x', 1).filterByData('x', 1).length
> 1

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

如果前一个扩展名在一个键值对上搜索，则使用此扩展名，您还可以搜索数据属性的存在，而不管其值如何。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

用法：

1 2	$('').data('x', 1).filterByData('x', 1).length // output: 1 $('').data('x', 1).filterByData('x').length // output: 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// test data
function extractData() {
log('data-prop=val ...... ' + $('div').filterByData('prop', 'val').length);
log('data-prop .......... ' + $('div').filterByData('prop').length);
log('data-random ........ ' + $('div').filterByData('random').length);
log('data-test .......... ' + $('div').filterByData('test').length);
log('data-test=anyval ... ' + $('div').filterByData('test', 'anyval').length);
}

$(document).ready(function() {
$('#b5').data('test', 'anyval');
});

// the actual extension
(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);

//just to quickly log
function log(txt) {
if (window.console && console.log) {
console.log(txt);
//} else {
// alert('You need a console to check the results');
}
$("#result").append(txt +"<br />");
}

1
2
3

#bPratik {
font-family: monospace;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

或小提琴：http：//jsfiddle.net/PTqmE/46/

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

所以供您参考，最短的代码在这里：

这是我的HTML代码：

1
2
3
4

这是我的jQuery选择器：

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

没有JQuery，ES6

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

我知道问题是关于JQuery，但读者可能想要一个纯JS方法。

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

我希望这可能会更好

谢谢

此选择器$("ul [data-slide='" + current +"']");将适用于以下结构：

1
2
3
4
5

虽然这个$("ul[data-slide='" + current +"']");适用于：

回到他原来的问题，关于如何在不事先知道元素类型的情况下完成这项工作，以下是：

1	$(ContainerNode).find(el.nodeName +"[data-slide='" + current +"']");