How to Use jQuery Selectors on Custom Data Attributes

In this tutorial, you will find useful information about the usage of jQuery selectors on custom data attributes. See examples and solve your problem.

Tags

jQuery provides several selectors to make the queries you are looking for. The starts with, ends with, and contains attribute selectors also can be used to select elements based on a specified string.

Let’s consider the HTML list:

HTML list

<ul data-group="Books">
  <li data-book="JavaScript"></li>
  <li data-book="CSS"></li>
  <li data-book ="HTML"></li>
</ul>

Using the basic querying to get all elements with data-book="JavaScript" below "Books" and to get all elements with data-book!="JavaScript" below "Books" you should use the following:

Javascript list get elements data attribute

$("ul[data-group='Books'] li[data-book='JavaScript']")
$("ul[data-group='Books'] li:not([data-book='JavaScript'])")

You can also use several meta selectors. If you want to do multiple queries, it is recommended to cache the parent selection:

Javascript list get elements data attribute

let group = $('ul[data-group="Books"]');

Then you can look for books that start with C:

Javascript list get elements data attribute

let css = $('[data-book^="C"]', group).css('color', '#qc87c9');

Or the books that contain the word script:

Javascript list get elements data attribute

let javascript = $('[data-book*="Script"]', group).css('color', '#8ebf42');

You can also get elements whose data attribute's ending matches:

Javascript list get elements data attribute

let html = $('[data-book$="ML"]', group).css('color', '#ff0000');

Here is the full example. Try it to see how it works:

Javascript jQuery selectors on custom data attributes

<!DOCTYPE html>
`<html>`
  `<head>`
    `<title>`Title of the document`</title>`
    `<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">``</script>`
  `</head>`
  `<body>`
    `<ul data-group="Books">`
      `<li data-book="JavaScript">`JavaScript`</li>`
      `<li data-book="CSS">`CSS`</li>`
      `<li data-book="HTML">`HTML`</li>`
    `</ul>`
    `<script>`
      $(document).ready(function() {
          //stored selector
          let group = $('ul[data-group="Books"]');
          //data-book starts with C
          let css = $('[data-book^="C"]', group).css('color', '#qc87c9');
          //data-book contains script
          let javascript = $('[data-book*="Script"]', group).css('color', '#8ebf42');
          //data-book ends with ML
          let html = $('[data-book$="ML"]', group).css('color', '#ff0000');
        });
    `</script>`
  `</body>`
`</html>`
<TryIt kind="code" mode="editor" snippetId={11823} />

## jQuery Selectors

jQuery provides a set of tools for matching a set of elements in a document which is largely based on [CSS](/learn-css.html) 1–3. The `[data-attr*="..."]` attribute selector matches elements containing the given [string](/learn-javascript/strings). The starts with selector selects elements that have the given attribute with a value beginning exactly with a specified string. The ends with selector selects elements that have the given attribute with a value ending exactly with a specified string.