本文介紹如何使用 jQuery 根據(jù)數(shù)據(jù)屬性值篩選元素。以下代碼片段選取所有 ID 以 "proto_" 開頭且數(shù)據(jù)屬性 "state" 值為 "open" 的 div 元素：

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

JSFiddle 演示

優(yōu)化版本

感謝 Vlad 提供的優(yōu)化方案：

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

JSFiddle 優(yōu)化版本演示

jQuery 通過數(shù)據(jù)屬性篩選對(duì)象的常見問題 (FAQ)

如何使用 jQuery 根據(jù)數(shù)據(jù)屬性篩選對(duì)象？

jQuery 提供強(qiáng)大的方法來操作和篩選基于數(shù)據(jù)屬性的對(duì)象?？梢允褂?jQuery 的 .filter() 函數(shù)實(shí)現(xiàn)此目的。.filter() 函數(shù)允許指定一個(gè)函數(shù)作為其參數(shù)，該函數(shù)應(yīng)返回 true 或 false。如果函數(shù)返回 true，則該元素將包含在篩選后的集合中；如果返回 false，則不包含。以下是一個(gè)基本示例：

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

此示例篩選所有數(shù)據(jù)屬性“key”值為“value”的 div 元素。

jQuery 中 .filter() 和 .find() 的區(qū)別是什么？

.filter() 和 .find() 都是 jQuery 方法，用于縮小對(duì) jQuery 對(duì)象中元素的搜索范圍。它們的主要區(qū)別在于：.filter() 將匹配元素的集合縮小到與選擇器匹配或通過函數(shù)測試的元素，而 .find() 獲取當(dāng)前匹配元素集合中每個(gè)元素的后代，并通過選擇器、jQuery 對(duì)象或元素進(jìn)行篩選。

我可以在 .filter() 函數(shù)中使用多個(gè)數(shù)據(jù)屬性嗎？

可以。只需在函數(shù)中添加更多條件即可。例如：

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

此示例篩選所有數(shù)據(jù)屬性“key1”值為“value1”且數(shù)據(jù)屬性“key2”值為“value2”的 div 元素。

如何根據(jù)包含特定字符串的數(shù)據(jù)屬性值篩選元素？

可以使用屬性包含選擇器 [name*="value"] 選擇屬性值包含特定字符串的元素。例如：

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

此示例篩選所有數(shù)據(jù)屬性“key”的值包含字符串“value”的 div 元素。

可以將 .filter() 與其他 jQuery 方法一起使用嗎？

可以。例如，可以將 .filter() 與 .css() 一起使用來更改篩選元素的樣式：

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

此示例將所有數(shù)據(jù)屬性“key”值為“value”的 div 元素的文本顏色更改為紅色。

以上是jQuery濾波器對(duì)象通過數(shù)據(jù)屬性值的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！