Select Elements by Data Attribute in jQuery

By the end of this page, you will understand how to use jQuery attribute selectors to find elements by data-* attributes, how HTML5 custom data attributes work, when to use .data() versus CSS-style selectors, and how to avoid common mistakes with naming and value matching.

HTML5 data-* attributes let you store custom information directly on elements in a valid, semantic way.

For example:

<a href="#" data-customerid="22">View Customer</a>

These attributes are useful when an element needs extra metadata, such as:

• an ID from the database
• a status value
• a category name
• configuration flags for JavaScript behavior

In jQuery, there are two closely related ideas here:

1. Selecting elements by attribute using a selector like:

   $('a[data-customerid="22"]')
   

2. Reading stored data from an element using:

   $(element).data('customerid')
   

These are not the same thing:

• Attribute selectors are for finding matching elements in the DOM.
• .data() is for getting or setting data on an element after you already have it.

This matters because in real projects you often:

Think of each HTML element as a labeled storage box.

• The element itself is the box.
• A data-* attribute is a sticky note attached to the box.
• jQuery selectors let you search for boxes with a specific sticky note.
• .data() lets you read the note after you have found the box.

So if you want all boxes labeled customerid = 22, you use a selector. If you already have one box and want to read its label, you use .data().

The most direct jQuery selector for a data-* attribute is an attribute selector.

Exact value match

<a href="#" data-customerid="22">Customer 22</a>
<a href="#" data-customerid="15">Customer 15</a>
<a href="#" data-customerid="22">Another Customer 22</a>

const links = $('a[data-customerid="22"]');
console.log(links.length); // 2

This selects all <a> elements whose data-customerid value is exactly 22.

Select elements that simply have the attribute

Consider this example:

<a href="#" data-customerid="22">Alice</a>
<a href="#" data-customerid="15">Bob</a>
<a href="#" data-customerid="22">Carol</a>

const matches = $('a[data-customerid="22"]');

matches.each(function () {
  console.log($(this).text(), $(this).data('customerid'));
});

Step by step:

1. jQuery evaluates the selector:

   'a[data-customerid="22"]'
   

2. It looks for all <a> elements.

data-* selectors are common in front-end code because they let HTML carry small pieces of metadata without mixing it into classes or unrelated attributes.

Common uses

• Buttons tied to database records

  <button data-userid="42">Delete User</button>
  

  Use jQuery to select the button and send the user ID in an AJAX request.

• Filtering UI items

  <div class="product" data-category="books"></div>
  <div class="product" data-category="games"></div>
  

  Select only products from one category.

• Tabs and modals

  <button data-target="settings-modal">Open Settings
  

In real projects, developers usually combine data-* attributes with patterns like event delegation, validation, and guard clauses.

Event delegation

When elements are added dynamically, developers often attach events to a parent:

$(document).on('click', 'a[data-customerid]', function (event) {
  event.preventDefault();
  const customerId = $(this).data('customerid');

  if (!customerId) {
    return;
  }

  console.log('Load customer', customerId);
});

This works even for links inserted later.

Guard clauses

Developers often exit early if required data is missing:

const customerId = $(this).data('customerid');
if (!customerId) {
  return;
}

This keeps code simple and avoids deep nesting.

Configuration through markup

1. Using the wrong attribute name format

HTML data-* attributes should be lowercase and hyphen-based.

Better HTML

<a data-customerid="22">Link</a>

or

<a data-customer-id="22">Link</a>

Selector

$('a[data-customerid="22"]')

or

$('a[data-customer-id="22"]')

Avoid mixed casing like this in HTML:

<a data-customerID="22">Link</a>

Even if browsers may tolerate it, lowercase naming is clearer and more reliable.

2. Confusing .data() with selectors

// Select elements with a data attribute
$('[data-customerid]')

// Select anchors with a specific data value
$('a[data-customerid="22"]')

// Read a data value
$(element).data('customerid')

// Read raw attribute text
$(element).attr('data-customerid')

// Loop through matches
$('a[data-customerid="22"]').each(function () {
  console.log($(this).data('customerid'));
});

Rules to remember

• Use data-* for custom metadata in HTML.
• Use attribute selectors to find matching elements.
• Use .data() to read or write data after selection.
• Prefer lowercase attribute names such as data-customerid or data-customer-id.
• Quote selector values for clarity: [data-name="value"]

Common patterns

$()


$()


$().()

How do I select elements with a specific data attribute in jQuery?

Use an attribute selector:

$('a[data-customerid="22"]')

This selects all <a> elements whose data-customerid equals 22.

How do I select elements that only have a data attribute, regardless of value?

Use the attribute name without a value check:

$('a[data-customerid]')

Should I use .data() or an attribute selector?

Use an attribute selector to find elements. Use .data() after selection to read the stored value.

Can I use camelCase in data-* attributes?

It is better to use lowercase and hyphens in HTML, such as data-customer-id or data-customerid.

What is the difference between .attr('data-x') and .data('x')?

.attr() reads the raw HTML attribute value. gives you jQuery's data access layer for the element.

• jQuery selectors — data-* selection is part of jQuery's selector system.
• HTML data attributes — these define how custom metadata is stored in markup.
• jQuery .data() — used to read and write element-associated data.
• jQuery .attr() — useful when you need the raw attribute value.
• Event delegation — often combined with data-* attributes for dynamic elements.
• DOM traversal — after selecting elements, you often move to parents, children, or siblings.
• Form validation — data-* attributes are commonly used to store validation rules or messages.