Using jquery to find elements with data-attribute that has a specific value?

Question

Is there a basic way via jquery to find all elements that have a data-attribute with a specific value and return those elements as an array?

i.e. <span data-productID="7">My product</span>

note, data attributes are normalized to be all lowercase. If you want it to be represented by productId in jQuery's .data method, use data-product-id="7" — user400654
– user400654, Commented Mar 18, 2013 at 21:04

user1726343 · Accepted Answer · 2013-03-18 20:59:44Z

2

The syntax for selecting elements with a specific attribute value is:

[attr_name = attr_value]

In your specific case, this would be:

$('span[data-product="7"]');

This returns a jQuery collection (not an Array), but it can be accessed much like an array using numerical indices. If you really need an array (perhaps in order to use Array prototype methods), you can use:

$('span[data-product="7"]').makeArray();

answered Mar 18, 2013 at 20:59

user1726343

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

2 Comments

John S Over a year ago

What is the collection returned a collection of? i.e. elements? I am trying to figure out how to manipulate the classes of each element in the collection.

user1726343 Over a year ago

@JohnS The collection wraps elements that match the expression in the selector string. To apply a class to the elements in a collection, use $(selector).addClass('myclass'). To remove a class, use removeClass, in much the same way.

Collectives™ on Stack Overflow

Using jquery to find elements with data-attribute that has a specific value?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related