Select JQuery elements that have some value set by data() [duplicate]

Question

Possible Duplicate:
jquery data selector

I have several elements with class 'connection_name'. Each one of these elements has a unique id bound to it using the data() JQuery function. I'm trying to query to find the element with a given id, but I can't seem to get it to work.

For the sake of this test, I created a page with only 1 element, and set the id of the element.

I can verify that the id is being set, as when I query the element in the console, it shows the id returned:

$('.connection_name').data()
  Object
  id: "4fea76bd99ea080d19000002"
  __proto__: Object

I've read on other questsions/posts that the element should be selected by $('selector[data-attribute=value]'), but that doesn't seem to work:

$('.connection_name[data-id="4fea76bd99ea080d19000002"]')
[]

Worse than that, even when I try to select it without any value (just by the attribute), I still return nothing:

$('.connection_name[data-id]')
[]

I'm not sure what the issue is, or how to go about doing this.

That link has a perfect answer (if @jfriend00's answer isn't good enough) — Thomas Clayson
– Thomas Clayson, Commented Jul 1, 2012 at 1:35
@Thomas, actually the link you provided doesn't help at all. On that answer, they suggest $('selector[data-attribute=value]') will work and it doesn't, hence my question. — Ryan Ogle
– Ryan Ogle, Commented Jul 1, 2012 at 1:45
The answer has a whole load of code to get that to work. Read the accepted answer. — Thomas Clayson
– Thomas Clayson, Commented Jul 1, 2012 at 2:03
No, it really doesn't. It's not an adequate answer at all. Jfriend provided a much clearer, better answer. — Ryan Ogle
– Ryan Ogle, Commented Jul 20, 2012 at 4:50

jfriend00 · Accepted Answer · 2012-07-01 01:31:52Z

7

Here's one way to do it:

var theItem = $('.connection_name').filter(function() {
    return($(this).data("id") === "4fea76bd99ea080d19000002");
});

answered Jul 1, 2012 at 1:31

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

3 Comments

Ryan Ogle Over a year ago

This works well, thanks jfriend. Do you happen to know why the $('selector[data-attribute=value]') pattern doesn't work? Several sources seem to claim that it does. Thanks again.

Interrobang Over a year ago

They're two different things. If you set data-* attributes on the elements, jQuery reads them ONCE, at document ready, and syncs them to its internal data storage. If you update these values later, using .data(), the attributes will not change. In the same way, if you update the data-* attributes using .attr(), the jQuery internal data storage will not change. So instead you have to iterate over every single element that fits your criteria, and read its data.

jfriend00 Over a year ago

@RyanOgle - When you do an attribute selector, that ONLY reads attributes from the actual DOM object, thus '.connection_name[id="4fea76bd99ea080d19000002"]' will only work if there is a data-id attribute on the object with that value. This will only be the case if the attribute is present in the HTML or if it is set with .attr(). If it the id value is set with .data("id", "4fea76bd99ea080d19000002"), then the value is NOT set as an attribute on the object (it's set in an internal data structure inside of jQuery) and thus it will not be found by a selector operation.

Collectives™ on Stack Overflow

Select JQuery elements that have some value set by data() [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related