How to Find Element With Data Attribute in jQuery

To select an HTML element by a data-* attribute, use a CSS attribute selector with jQuery’s .find() or .filter(), or pass the selector to jQuery directly. Choose based on whether the target is below your current selection or is the selected element itself.

Find a Data Attribute Using jQuery .find() Method

The jQuery .find() method searches descendants of the elements in the current jQuery collection. For example, $("ul").find("[data-name='Edison']") selects the list item with data-name="Edison" inside a list. You can chain an action such as .css("font-size", "3em") to change the matched item’s font size.

This method does not test the ul itself; it searches elements below it. Use a selector that matches the attribute’s value, then apply the action to the returned element. If the selector returns no elements, check the attribute spelling and confirm the target is nested beneath the selected ul.

Find a Data Attribute Using a CSS Attribute Selector

A CSS attribute selector has the form [attribute="value"]. To select a list item with data-iso="MRT" inside a list, use $("ul [data-iso='MRT']"). The space between ul and the bracket means “a matching descendant of a ul.” The selected element is Mauritania’s list item, so a chained call such as .css("color", "magenta") styles that item.

When the attribute belongs to the ul itself, use a compound selector with no space: $("ul[data-viruses='computer-viruses']"). That selector matches the list itself; adding a space would instead ask for a descendant with the attribute. Replace data-iso and MRT with the attribute name and value in your markup, keeping the brackets and quotes around the value. The selector compares the attribute value as written; it does not search an element’s text or a separate JavaScript property. Use the exact value present in the HTML.

This small JavaScript data model uses the same country names and attribute values as the selector example. It shows which item matches the data-iso value.

const countries = [
  { name: "Mauritania", "data-iso": "MRT" },
  { name: "Luxembourg", "data-iso": "LUX" },
  { name: "Croatia", "data-iso": "HRV" }
];

const match = countries.filter((country) => country["data-iso"] === "MRT")[0];
console.log(match.name);

Mauritania

The data model illustrates the value comparison; it does not run a browser or jQuery. The jQuery selector patterns above are browser-side syntax examples.

Find a Data Attribute Using the .filter() Method

Use jQuery’s .filter() to narrow an existing collection to elements that match a selector. For example, $("li").filter('[data-esolang="Chef"]') selects the Chef list item from the current set of list items. Chain .addClass("style-chef") to add a class to that match.

The distinction is the starting collection: .find() searches below its elements, while .filter() checks the elements already in its collection. For a target that may be either a descendant or the parent itself, inspect where the data-* attribute appears in the markup and choose the selector accordingly.