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

Question

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

Answer 1

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());
});

Answer 2

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

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

Answer 3

use attribute equals selector

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

u can find more info here

Answer 4

$("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.