blocks|key|234221|text|你可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|234222|$('[data-myAttr!=""]');+|code-block|syntax|javascript|234223|这将选择属性data-myAttr不等于'‘的所有元素(因此它必须已设置)；(仅适用于在HTML语言中不通过jQuery设置其数据属性的元素)|offset|length|style|CODE|234224|您还可以使用+(适用于从jQuery设置的数据属性)|234225|$('*').filter(function()+{
++++return+$(this).data('myAttr')+!==+undefined;
});|234226|entityMap^0|0|0|6|B|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You could do
<pre><code>$('[data-myAttr!=&quot;&quot;]'); 
</code></pre>
this selects all elements which have an attribute <code>data-myAttr</code> which is not equal to '' (so it must have been set); (only for elements that have their data attribute set in HTML not via jQuery)
you could also use <a href="http://api.jquery.com/filter/" rel="nofollow noreferrer">filter()</a> (which works for data attributes set from jQuery)
<pre><code>$('*').filter(function() {
 return $(this).data('myAttr') !== undefined;
});
</code></pre>

blocks|key|3116748|text|选择它们的最好且简单的方法是：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3116749|$('[data-myAttr]')|code-block|syntax|javascript|3116750|更多信息：|3116751|我测试了很多东西。|3116752|使用$('[data-myAttr!=""]')并不适用于所有情况。因为没有data-myAttr集的元素的data-myAttr将等于undefined，而$('[data-myAttr!=""]')也将选择这些元素，这是不正确的。|CODE|3116753|entityMap^0|0|F|0|0|0|5|0|0|2|M|12|B|1I|B|1W|9|27|M|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|10|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|11|8|@$9|12|A|13|B|Q]|$9|14|A|15|B|Q]|$9|16|A|17|B|Q]|$9|18|A|19|B|Q]|$9|1A|A|1B|B|Q]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|S|$]]

The best and simple way to select them is:

<pre><code>$('[data-myAttr]')
</code></pre>

More Information:

I tested a lot of things.

Using <code>$('[data-myAttr!=""]')</code> doesn't work for all cases. Because elements that do not have a <code>data-myAttr</code> set, will have their <code>data-myAttr</code> equal to <code>undefined</code> and <code>$('[data-myAttr!=""]')</code> will select those as well, which is incorrect.

blocks|key|239712|text|您可以使用filter()|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|239713|var+elements+=+$("*").filter(function()+{
++++return+$(this).data("myAttr")+!==+undefined;
});|code-block|syntax|javascript|239714|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/filter/^0|5|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

You can use <a href="http://api.jquery.com/filter/" rel="noreferrer">filter()</a>:

<pre><code>var elements = $("*").filter(function() {
 return $(this).data("myAttr") !== undefined;
});
</code></pre>

blocks|key|236840|text|您可以使用这个jQuery选择器扩展：Querying+element+data|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|236841|$(':data');+++++++//+All+elements+with+data++
$(':not(:data)');+//+All+elements+without+data|code-block|syntax|javascript|236842|entityMap|0|LINK|mutability|MUTABLE|url|http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/^0|J|L|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

You could use this jQuery Selector extention: <a href="http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/" rel="noreferrer">Querying element data</a>

<pre><code>$(':data'); // All elements with data 
$(':not(:data)'); // All elements without data
</code></pre>

blocks|key|239758|text|您可以在:data()+selector中使用JQuery+UI|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|239759|239760|选择具有存储在指定键下的数据的元素。|blockquote|239761|239762|239763|有关示例，请查看this+jsfiddle|239764|要获得与.data('myAttr')匹配的所有元素，您可以使用|style|CODE|239765|var+matches+=+$(':data(myAttr)');|code-block|syntax|javascript|239766|这应该适用于具有data-属性的元素和具有使用$.data()存储的数据的元素，因为|239767|从jQuery1.4.3HTML5开始，|239768|的数据属性将自动拉入到jQuery的数据对象中。|239769|239770|239771|但这并不能很好地工作。检查this+jsfiddle，您将看到第二次调用选择器时，它应该匹配两个元素，并且只匹配一个元素。这是由于jquery-ui库中的“错误”造成的。|239772|这取自核心jquery-ui文件。|239773|+$.extend(+$.expr[+":"+],+{
++++data:+$.expr.createPseudo+?
++++++++$.expr.createPseudo(function(+dataName+)+{
++++++++++++return+function(+elem+)+{
++++++++++++++++return+!!$.data(+elem,+dataName+);
++++++++++++};
++++++++})+:
++++++++//+support:+jQuery+<1.8
++++++++function(+elem,+i,+match+)+{
++++++++++++return+!!$.data(+elem,+match[+3+]+);
++++++++}
});|239774|如您所见，它们使用的是$.data(elem,+match)而不是$(elem).data(match)，这会导致在请求具有data-属性的元素时缓存不会更新。如果元素已经针对data()存储进行了测试，则可以很好地工作，但如果没有，则不会将其包括在结果匹配中。|239775|如果您想要的是只将元素与您设置的数据信息进行匹配，那么这可能根本不是一个bug，但如果不是这样，您就有两个选择。|239776|239777|不要使用jquery-ui并扩展您自己的伪选择器$(:mydata(myAttr))|ordered-list-item|239778|239779|$.extend($.expr":"，{+mydata：$.expr.createPseudo？$.expr.createPseudo(function(dataName)+{+return+function(elem)+{+return+!!$(elem).data(dataName)；}；})：function(elem，i，match)+{+return+!!$(elem).data(match3)；}+});|239780|//伪选择器代码$.extend($.expr":"，{+mydata：$.expr.createPseudo？$.expr.createPseudo(function(dataName)+{+return+function(elem)+{+return+!!$(elem).data(dataName)；}；})：function(elem，i，match)+{+return+!!$(elem).data(match3)；}+})；//结束伪选择器testSelector+=testSelector(){+var+matched+=+$(':mydata(test)')，results+=+$('#results')；results.append('You+matched‘%2B+matched.length+%2B’elements')；matched.css('border'，‘黑色3px实心’)；console.log(+matched+)；console.log('You+matched‘%2B+matched.length+%2B’elements')；}；testSelector()；$(‘#addData’).click(){+$(".bar").data('test'，'value2')；testSelector()；})；|239781|.foo+{+background-color:红色；color:白色；}+.bar+{+background-color:蓝色；color:白色；}+#addData+{空白区:+20px；}|239782|239783|239784|将jquery-ui与:data伪选择器一起使用，并连接选择[data-myAttr]的结果，以包括可能被跳过的结果|239785|239786|'data-myAttr')匹配=+$(':data(myAttr)'，var|239787|testSelector+=+function()+{+var+matched+=$(‘：数据(测试)，数据测试’)，results+=+$('#results')；results.append('You+matched‘%2B+matched.length+%2B’elements')；matched.css('border'，‘黑色3px实体’)；console.log(+matched+)；console.log('You+matched‘%2B+matched.length+%2B’elements')；}；testSelector()；$(‘#addData’).click(){+$(".bar").data('test'，'value2')；testSelector()；})；|239788|.foo+{+background-color:红色；color:白色；}+.bar+{+background-color:蓝色；color:白色；}+#addData+{空白区:+20px；}|239789|239790|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jqueryui.com/data-selector/|1|https://jsfiddle.net/devconcept/2r2c6ku1/1/|2|http://jsfiddle.net/devconcept/z27n92jm/^0|4|G|0|0|0|0|0|0|8|D|1|0|4|F|0|0|8|5|N|8|0|0|0|0|0|D|D|2|0|0|0|B|J|X|J|1Q|5|2G|6|0|0|0|O|I|0|0|0|0|0|0|0|B|5|U|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2B|8|@]|9|@$A|2C|B|2D|1|2E]]|C|$]]|$1|D|3|-4|5|6|7|2F|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|2G|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|2H|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|2I|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|2J|8|@]|9|@$A|2K|B|2L|1|2M]]|C|$]]|$1|L|3|M|5|6|7|2N|8|@$A|2O|B|2P|N|O]]|9|@]|C|$]]|$1|P|3|Q|5|R|7|2Q|8|@]|9|@]|C|$S|T]]|$1|U|3|V|5|6|7|2R|8|@$A|2S|B|2T|N|O]|$A|2U|B|2V|N|O]]|9|@]|C|$]]|$1|W|3|X|5|6|7|2W|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|G|7|2X|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|2Y|8|@]|9|@]|C|$]]|$1|11|3|-4|5|6|7|2Z|8|@]|9|@]|C|$]]|$1|12|3|13|5|6|7|30|8|@]|9|@$A|31|B|32|1|33]]|C|$]]|$1|14|3|15|5|6|7|34|8|@]|9|@]|C|$]]|$1|16|3|17|5|R|7|35|8|@]|9|@]|C|$S|T]]|$1|18|3|19|5|6|7|36|8|@$A|37|B|38|N|O]|$A|39|B|3A|N|O]|$A|3B|B|3C|N|O]|$A|3D|B|3E|N|O]]|9|@]|C|$]]|$1|1A|3|1B|5|6|7|3F|8|@]|9|@]|C|$]]|$1|1C|3|-4|5|6|7|3G|8|@]|9|@]|C|$]]|$1|1D|3|1E|5|1F|7|3H|8|@$A|3I|B|3J|N|O]]|9|@]|C|$]]|$1|1G|3|-4|5|6|7|3K|8|@]|9|@]|C|$]]|$1|1H|3|1I|5|6|7|3L|8|@]|9|@]|C|$]]|$1|1J|3|1K|5|6|7|3M|8|@]|9|@]|C|$]]|$1|1L|3|1M|5|6|7|3N|8|@]|9|@]|C|$]]|$1|1N|3|-4|5|6|7|3O|8|@]|9|@]|C|$]]|$1|1O|3|-4|5|6|7|3P|8|@]|9|@]|C|$]]|$1|1P|3|1Q|5|1F|7|3Q|8|@$A|3R|B|3S|N|O]|$A|3T|B|3U|N|O]]|9|@]|C|$]]|$1|1R|3|-4|5|6|7|3V|8|@]|9|@]|C|$]]|$1|1S|3|1T|5|6|7|3W|8|@]|9|@]|C|$]]|$1|1U|3|1V|5|6|7|3X|8|@]|9|@]|C|$]]|$1|1W|3|1X|5|6|7|3Y|8|@]|9|@]|C|$]]|$1|1Y|3|-4|5|6|7|3Z|8|@]|9|@]|C|$]]|$1|1Z|3|-4|5|6|7|40|8|@]|9|@]|C|$]]]|20|$21|$5|22|23|24|C|$25|26]]|27|$5|22|23|24|C|$25|28]]|29|$5|22|23|24|C|$25|2A]]]]

You can use JQuery UI with the <a href="http://api.jqueryui.com/data-selector/" rel="noreferrer">:data() selector</a>

<blockquote>
 Selects elements which have data stored under the specified key.
</blockquote>

Check <a href="https://jsfiddle.net/devconcept/2r2c6ku1/1/" rel="noreferrer">this jsfiddle</a> for an example

To get all elements matching <code>.data('myAttr')</code> you can use 

<pre><code>var matches = $(':data(myAttr)');
</code></pre>

This should work for both elements with <code>data-</code> attributes and elements with data stored using <code>$.data()</code> because

<blockquote>
 As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.
</blockquote>

But this doesn't work very well. Check <a href="http://jsfiddle.net/devconcept/z27n92jm/" rel="noreferrer">this jsfiddle</a> and you will see that the second time the selector is called it should match 2 elements and is only matching one. This is due to "a bug" in the jquery-ui library. 

This is taken from the core jquery-ui file.

<pre><code> $.extend( $.expr[ ":" ], {
 data: $.expr.createPseudo ?
 $.expr.createPseudo(function( dataName ) {
 return function( elem ) {
 return !!$.data( elem, dataName );
 };
 }) :
 // support: jQuery &lt;1.8
 function( elem, i, match ) {
 return !!$.data( elem, match[ 3 ] );
 }
});
</code></pre>

As you can see they are using <code>$.data(elem, match)</code> instead <code>$(elem).data(match)</code> which causes the cache not to be updated in case you are requesting elements with <code>data-</code> attributes. If the element has been tested for <code>data()</code> storage this works well but if not it will not be included in the resulting matches. 

This might not be a bug at all if what you want is to match only elements with data information set by you but if not you are left with two options.

<ol>
<li>Don't use jquery-ui and extend your own pseudo-selector <code>$(:mydata(myAttr))</code>

<pre><code>$.extend($.expr[":"], {
 mydata: $.expr.createPseudo ?
 $.expr.createPseudo(function(dataName) {
 return function(elem) {
 return !!$(elem).data(dataName);
 };
 }) : function(elem, i, match) {
 return !!$(elem).data(match[3]);
 }
});
</code></pre>

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code> // pseudoselector code
 $.extend($.expr[":"], {
 mydata: $.expr.createPseudo ?
 $.expr.createPseudo(function(dataName) {
 return function(elem) {
 return !!$(elem).data(dataName);
 };
 }) : function(elem, i, match) {
 return !!$(elem).data(match[3]);
 }
 });
 // end pseudoselector

 testSelector = function() {
 var matched = $(':mydata(test)'),
 results = $('#results');
 results.append('&lt;div&gt;You matched ' + matched.length + ' elements&lt;/div&gt;');
 matched.css('border', 'black 3px solid');
 console.log(matched);
 console.log('You matched ' + matched.length + ' elements');
 };

 testSelector();
 $('#addData').click(function() {
 $(".bar").data('test', 'value2');
 testSelector();
 });

 </code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code> .foo {
 background-color: red;
 color: white;
 }
 .bar {
 background-color: blue;
 color: white;
 }
 #addData {
 margin-top: 20px;
 }

 </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
 &lt;div&gt;
 &lt;span class="bar"&gt;without data attribute&lt;/span&gt;
 &lt;span class="foo" data-test="value1"&gt;with data attribute&lt;/span&gt;
 &lt;/div&gt;
 &lt;button id="addData" type="button"&gt;Add data&lt;/button&gt;
 &lt;div id="results"&gt;&lt;/div&gt;

 </code></pre>
</div>
</div>
</li>
<li>Use jquery-ui with the <code>:data</code> pseudoselector and join the results of selecting <code>[data-myAttr]</code> to include the ones that might be skipped

<pre><code>var matches = $(':data(myAttr)', '[data-myAttr]')
</code></pre>

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code> testSelector = function() {
 var matched = $(':data(test), [data-test]'),
 results = $('#results');
 results.append('&lt;div&gt;You matched ' + matched.length + ' elements&lt;/div&gt;');
 matched.css('border', 'black 3px solid');
 console.log(matched);
 console.log('You matched ' + matched.length + ' elements');
 };

 testSelector();
 $('#addData').click(function() {
 $(".bar").data('test', 'value2');
 testSelector();
 });

 </code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code> .foo {
 background-color: red;
 color: white;
 }
 .bar {
 background-color: blue;
 color: white;
 }
 #addData {
 margin-top: 20px;
 }

 </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
 &lt;div&gt;
 &lt;span class="bar"&gt;without data attribute&lt;/span&gt;
 &lt;span class="foo" data-test="value1"&gt;with data attribute&lt;/span&gt;
 &lt;/div&gt;
 &lt;button id="addData" type="button"&gt;Add data&lt;/button&gt;
 &lt;div id="results"&gt;&lt;/div&gt;

 </code></pre>
</div>
</div>
</li>
</ol>

blocks|key|234236|text|$('[data-myAttr]').each(function()+{
+++++++var+element+=+$(this);
+++++++//+Do+something+with+the+element
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|234237|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('[data-myAttr]').each(function() {
 var element = $(this);
 // Do something with the element
});
</code></pre>

Select elements that i have previously set with <code>jquery.data();</code>

i.e. Select all elements with <code>.data('myAttr')</code> already been set.

SOLUTION 

A jsfiddle to demostrate is <a href="http://jsfiddle.net/argiropoulostauros/xynZA/3/">Fiddle</a>

Jquery select all elements that have $jquery.data()

jQuery

HTML5

选择我之前使用jquery.data();设置的元素即选择已经设置了.data('myAttr')的所有元素。解决方案要演示的一个jsfiddle是。

问Jquery选择所有具有$jquery.data()的元素
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery选择所有具有$jquery.data()的元素EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery选择所有具有$jquery.data()的元素
EN