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

我有以下场景：

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。

知道我错过了什么吗？

1539654 次浏览
小开
最佳答案

您必须将current的值注入属性相等选择器：

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

对于较旧的JavaScript环境（ES5及更早版本）：

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

如果您不想键入所有这些，这里有一种按数据属性查询的更短方法：

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

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

小开

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

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

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

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

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

这是我的超文本标记语言代码：

<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.
小开

我将心理brm的filterByData扩展改进为jQuery。

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

(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

// test datafunction 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 logfunction log(txt) {if (window.console && console.log) {console.log(txt);//} else {//  alert('You need a console to check the results');}$("#result").append(txt + "<br />");}
#bPratik {font-family: monospace;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bPratik"><h2>Setup</h2><div id="b1" data-prop="val">Data added inline :: data-prop="val"</div><div id="b2" data-prop="val">Data added inline :: data-prop="val"</div><div id="b3" data-prop="diffval">Data added inline :: data-prop="diffval"</div><div id="b4" data-test="val">Data added inline :: data-test="val"</div><div id="b5">Data will be added via jQuery</div><h2>Output</h2><div id="result"></div>
<hr /><button onclick="extractData()">Reveal</button></div>

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

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

我希望这会更好

感谢

小开

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

<ul><li data-slide="item"></li></ul>

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

<ul data-slide="item"><li></li></ul>

小开

没有jQuery，ES6

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

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


提交答案