Find an element with a specific data attribute jQuery

Question

I understand that I can always iterate down the DOM tree and check every element for a data field and if the value is correct but I would like a cleaner solution. For example

    <div id="theDiv">
       <div>
         <span data-num="3" ></span>
         OTHER HTML
       </div>
       <div>
         <div><span data-num="23"></span><div>
         OTHER HTML
       </div>
       <div>
         <span data-num="3"></span>
         OTHER HTML
       </div>
    </div>

Is there a jQuery one liner to find all spans with data-num=3? I know I can find all spans by

  $("#theDiv").find(span).each(function(e) { ... });

but I would like something like

  $("#theDiv").find(span > data-num=3).each(function(e) { ... });

Yes there is, but i forgot the exact syntax, but I am sure someone will have it for you. Or you can look up the css to find selector via attribute value — Huangism
– Huangism, Commented Jul 31, 2012 at 19:40

Adam · Accepted Answer · 2012-07-31 19:41:56Z

54

Use the Attribute Equals Selector

 $("#theDiv span[data-num='3']")

Try it!

answered Jul 31, 2012 at 19:41

Adam

45.1k17 gold badges107 silver badges145 bronze badges

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

4 Comments

Kiruse Over a year ago

Darn, I was just about to write that. +1 anyway.

epascarello Over a year ago

The selector here is nor correct. It is looking for the data attribute on the element with the id, not the span!

user974896 Over a year ago

Thanks. Upvotes all around. Works perfect (i was toying with the old example and it wasn't working but I now know why :)). Is there any way I can use the same syntax to find spans with data-num=ANYTHING? as not all spans have a data-num

Adam Over a year ago

@user974896 just leave out the ='3' part

voodoo417 · Accepted Answer · 2012-07-31 22:09:56Z

1

only for example ( filter)

$('#theDiv span').filter(function(){ return $(this).data("num") == 3});

edited Jul 31, 2012 at 22:09

answered Jul 31, 2012 at 19:54

voodoo417

12.2k3 gold badges39 silver badges43 bronze badges

1 Comment

user974896 Over a year ago

Did not want to itterate through all the spans and wanted a simple one liner.

Collectives™ on Stack Overflow

Find an element with a specific data attribute jQuery

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related