CODEWITHSUNDEEP
jqueryjquery-selectors
beta
beta

Reputation: 2633

How to get elements by a specific value of a custom attribute in jQuery?

I have a custom attribute called data-role and I'd like to find all elements where data-role="content" in jQuery.

enter image description here

I'm currently doing this with some old JavaScript code:

var elements = element.getElementsByTagName(tagName);
for(var i=0; i<elements.length; i++) {
  if(elements[i].getAttribute("data-role") == "content") {
    // does something evil
  }
}

Disclaimer: Code was not checked, just wrote it down quickly.

I've got a feeling that there's an elegant 1-line solution in jQuery, but I'm a novice. And I can't sleep before I know, so perhaps you stackoverflowers can help a bro out. ;-)

Upvotes: 4

Views: 10791

Answers (4)

m1k1o
m1k1o

Reputation: 2364

jQuery select by attribute selector:

$('[data-role="content"]')

And for an array use .each(); instead of for

$('[data-role="content"]').each(function(){
  alert($(this).html());
});

Upvotes: 1

iJade
iJade

Reputation: 23791

use attribute equals selector

$("div[data-role='content']")

u can find more info here

Upvotes: 1

Abraham P
Abraham P

Reputation: 15471

$("tagName[attribute='value']")

Or, in your case:

$("div[data-role='content']")

Will return the right elements.

From there, if you wanted to iterate over the set of elements that match this selector and do something evil, you could:

$("[data-role='content']").each(function(index){

     Do something evil
     $(this) is the current element in the iteration
});

Please note that the tagName is optional. JQuery selectors can be concatenated at will, so you can query simulataneously for tagname (simple string), id (prefaced by #), class (prefaced by .) or attribute (in square brackets as above), or for any limited combination of them eg:

 $("tagName#someId.someClass.someOtherClass[attribute='value']")
 $("[attribute='value']")
 $('tagName')
 $('#someId')

Are all valid queries, however keep in mind that jquery will only return elements that match ALL conditions in the query.

Upvotes: 6

UweB
UweB

Reputation: 4110

Check out jQuery's list of attribute selectors. You're looking for something like

$('div[data-role="content"]')

Upvotes: 2

Related Questions