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

Question

Select the elements that I previously installed using jquery.data();

i.e. Select all items with .data('myAttr') already installed.

DECISION

For demonstration jsfiddle is Fiddle

Answer 1

You could do

 $('[data-myAttr!=""]'); 

this selects all elements that have the data-myAttr attribute that is not equal to '' (therefore it must be set);

you can also use filter ()

 $('*').filter(function() { return $(this).data('myAttr') !== undefined; }); 

Answer 2

The best and easiest way to select them:

 $('[data-myAttr]') 

Additional Information:

I tested a lot.

Using $('[data-myAttr!=""]') Does not work for all cases. Since elements that do not have the data-myAttr set will have data-myAttr equal to undefined , and $('[data-myAttr!=""]') also select those that are incorrect.

Answer 3

You can use filter () :

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

Answer 4

You can use jQuery Selector extension: Querying item data

 $(':data'); // All elements with data $(':not(:data)'); // All elements without data 

Answer 5

You can use jQuery UI with selector: data ()

Selects items whose data is stored under the specified key.

Check out this jsfiddle for an example.

To get all the elements matching .data('myAttr') you can use

 var matches = $(':data(myAttr)'); 

This should work for both elements with data- and elements with data stored using $.data() since

Starting with jQuery 1.4.3, HTML 5 data- attributes will be automatically added to the jQuery data object.

But it doesn’t work very well. Check this jsfiddle and you will see that the second time the selector is called, it should correspond to 2 elements and only one. This is due to a “bug” in the jquery-ui library.

This is taken from the main jquery-ui file.

  $.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 ] ); } }); 

As you can see, they use $.data(elem, match) instead of $(elem).data(match) which leads to the cache not being updated if you request elements with data- . If the item has been tested to store data() this works well, but if not, it will not be included in the final matches.

This may not be a mistake at all if you want to match only the items with the information you set, but if not, you have two options.

1. Do not use jquery-ui and not $(:mydata(myAttr)) your own pseudo- $(:mydata(myAttr))

    $.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]); } }); 

     // 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('<div>You matched ' + matched.length + ' elements</div>'); 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(); }); 

     .foo { background-color: red; color: white; } .bar { background-color: blue; color: white; } #addData { margin-top: 20px; } 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span class="bar">without data attribute</span> <span class="foo" data-test="value1">with data attribute</span> </div> <button id="addData" type="button">Add data</button> <div id="results"></div> 

2. Use jquery-ui with the :data pseudo selector and combine the results of the [data-myAttr] to include those that might be skipped

    var matches = $(':data(myAttr)', '[data-myAttr]') 

     testSelector = function() { var matched = $(':data(test), [data-test]'), results = $('#results'); results.append('<div>You matched ' + matched.length + ' elements</div>'); 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(); }); 

     .foo { background-color: red; color: white; } .bar { background-color: blue; color: white; } #addData { margin-top: 20px; } 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div> <span class="bar">without data attribute</span> <span class="foo" data-test="value1">with data attribute</span> </div> <button id="addData" type="button">Add data</button> <div id="results"></div> 

Answer 6

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

Answer 7

Select the elements that I previously installed using jquery.data();

---

The question is to search for all elements with a specific key, not any data.

---

Try using jQuery.data()

 $(".myClass").each(function(i){ if( i % 2 == 0 ){ $(this).data("myAttr",i + 1); } }); var res = $(".myClass").map(function(i) { console.log($(this).data("myAttr")); return $.data(this, "myAttr") !== undefined ? this : null }); console.log(res); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="myClass">1</div> <div class="myClass">2</div> <div class="myClass">3</div> <div class="myClass">4</div> <div class="myClass">5</div> 

jsfiddle http://jsfiddle.net/xynZA/142/