Get all elements with data = value

Question

I have this problem in my JavaScript class:

//===== i set this data record
jQuery(element).data("types", "row");
console.log(jQuery(element).data("types")); // writes "row" (the element is a div)

//==== into other method
//==== i want find all element with data-types = row
console.log(jQuery("[data-types='row']").length); // writes 0

jQuery("div").each(function(i,e){
    console.log(i, jQuery(e).data(), jQuery(e).attr("id")); // writes object{type:row}
});

why with this jQuery("[data-types='row']") i can't find elements ???

Salman Arshad · Accepted Answer · 2014-12-11 05:39:52Z

3

When you assign data to an element using jQuery.data() it does not update the data-* attribute of the element; you therefore cannot use attribute selectors to select the element.

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

In order to select these elements you can use the filter() function with custom function:

jQuery("div").filter(function() {
    return $(this).data("types") === "row";
});

Note: If you are also using jQuery UI you would find the :data(key) selector useful.

edited Dec 11, 2014 at 5:39

answered Dec 10, 2014 at 17:49

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barmar · Accepted Answer · 2014-12-10 17:51:47Z

1

The data() method only uses the DOM when initially reading from an element. When you use it to add or change the data of an element, it puts the data in its internal memory, it doesn't modify the DOM. So DOM selectors won't find it. From the documentation:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

To find all the elements, you can use .filter():

jQuery("div").filter(function() {
    return $(this).data("types") == "row";
});

answered Dec 10, 2014 at 17:51

Barmar

789k57 gold badges554 silver badges669 bronze badges

Collectives™ on Stack Overflow

Get all elements with data = value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related