jQuery Filter Objects by Data Attribute Value

This article describes how to use jQuery to filter elements based on data attribute values. The following code snippet selects all div elements with IDs starting with "proto_" and the data attribute "state" value is "open":

var $el = $('div[id^=proto_]').filter(function() {
    return ($(this).data("state") == "open");
});
console.log($el);

JSFiddle Demo

Optimized version

Thanks to Vlad for the optimization solution:

var $el = $('div[id^=proto_]').filter('div[data-state=open]').css('color','red');

JSFiddle Optimized Version Demo

FAQ for jQuery Filtering Objects by Data Attributes

How to use jQuery to filter objects based on data attributes?

jQuery provides powerful ways to manipulate and filter objects based on data attributes. This can be achieved using the .filter() function of jQuery. The .filter() function allows specifying a function as its parameter, which should return true or false. If the function returns true, the element will be included in the filtered collection; if false is returned, it will not be included. Here is a basic example:

$('div').filter(function() {
  return $(this).data('key') === 'value';
});

This example filters all div elements with a value of "key" for data attributes.

What is the difference between

and .filter() in .find()?

.filter() and .find() are both jQuery methods used to narrow the search scope of elements in jQuery objects. Their main differences are: .filter() narrows the set of matching elements to elements that match or pass the function test, while .find() gets the descendants of each element in the current matching element collection and passes the selector, jQuery object or elements to filter.

Can I use multiple data attributes in the .filter() function?

Yes. Just add more conditions to the function. For example:

$('div').filter(function() {
  return $(this).data('key1') === 'value1' && $(this).data('key2') === 'value2';
});

This example filters all div elements with a value of "key1" of data attribute "value1" and a value of "key2" of data attribute "value2".

How to filter elements based on data attribute values ​​containing a specific string?

You can use attribute containing selectors [name*="value"] to select elements whose attribute value contains a specific string. For example:

$('div[data-key*="value"]').filter(function() {
  // 您的代码
});

This example filters all data attribute "key" values ​​containing div elements with string "value".

Can .filter() be used with other jQuery methods?

Yes. For example, you can use .filter() with .css() to change the style of the filter element:

$('div').filter(function() {
  return $(this).data('key') === 'value';
}).css('color', 'red');

This example changes the text color of all div elements with the "key" value of "value" to red.

The above is the detailed content of jQuery Filter Objects by Data Attribute Value. For more information, please follow other related articles on the PHP Chinese website!