jQuery如何find一个基于数据属性值的元素？
我有以下情况：
var el = 'li'; 在页面上有5个<li> ”，每个属性都有一个data-slide=number属性（编号分别为1,2,3,4,5） 。
我现在需要find当前活动的幻灯片编号，它被映射到var current = $('ul').data(current); 并在每次幻灯片更改时更新。
到目前为止，我的尝试已经不成功，试图构造匹配当前幻灯片的select器：
$('ul').find(el+[data-slide=+current+]);
不匹配/返回任何东西…
我无法对li部分进行硬编码的原因是，这是一个用户可访问的variables，如果需要可以更改为不同的元素，所以它可能并不总是一个li 。
任何想法，我失踪？
您必须将current的值注入到一个Attribute Equalsselect器中：
$("ul").find("[data-slide='" + current + "']");
ES6方式：
$("ul").find(`[data-slide='${current}']`)
如果你不想input所有这些，这里有一个更简单的方法来查询数据属性：
$("ul[data-slide='" + current +"']");
仅供参考： http : //james.padolsey.com/javascript/a-better-data-selector-for-jquery/
当用[data-x = …]进行search时，请注意， 它不适用于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
我改进了psycho brm的filterByData扩展到jQuery。
如果以前的扩展在键值对上search，则使用此扩展可以search数据属性的存在，而不pipe其值如何。
(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 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 />"); }
#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>
在使用jQuery和data- *属性获取元素时，我遇到了同样的问题。
所以为了您的参考，最短的代码在这里：
这是我的HTML代码：
<section data-js="carousel"></section> <section></section> <section></section> <section data-js="carousel"></section>
这是我的jQueryselect器：
$('section[data-js="carousel"]'); // this will return array of the section elements which has data-js="carousel" attribute.
回到原来的问题，关于如何在事先不知道元素types的情况下做这个工作，下面是这样的：
$(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");
这个select器$("ul [data-slide='" + current +"']"); 将为以下结构工作：
<ul><li data-slide="item"></li></ul>
而这个$("ul[data-slide='" + current +"']"); 将工作于：
<ul data-slide="item"><li></li></ul>
$("ul").find("li[data-slide='" + current + "']");
我希望这可能会更好
谢谢
