极客教程如何在jQuery中通过数据属性值过滤对象
在这篇文章中，我们将学习如何在jQuery中通过其数据属性值来过滤对象。有两种方法可以实现这个目的。
方法1：使用jQuery库中的this属性和filter(), data()和css()方法。在下面的例子中，有四个分部元素被定义，每个都有一些数据属性及其相应的值。我们应用filter() 方法给每个分部元素，该方法需要一个匿名函数作为其参数。这个匿名函数返回布尔值true或false，取决于每个分部元素的数据属性的值是否等于一个特定的字符串（字符串是”有效”）。为了检查这一点，使用了data()方法，该方法将data-前缀后的属性名称作为一个字符串参数。
之后，我们将css()方法与filter()方法链接起来，根据上面讨论的功能，在所有被过滤的元素或对象上应用一些样式设计。
例子：在下面的例子中，数据属性被命名为data-geek，所有被过滤的元素都以绿的字体颜色为样式。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
p {
font-size: 25px;
font-weight: bold;
}
div {
font-size: 20px;
font-weight: bold;
}
div:not(:last-child) {
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p>jQuery - Filter Objects by Data Attribute Value</p>
<div class="geek-division" data-geek="invalid">
Geek 1
</div>
<div class="geek-division" data-geek="valid">
Geek 2
</div>
<div class="geek-division" data-geek="invalid">
Geek 3
</div>
<div class="geek-division" data-geek="valid">
Geek 4
</div>
<script type="text/javascript">
// Select all div with the class
// attribute "division"
('div[class*="division"]')
.filter(function () {
return(this).data("geek") == "valid";
}).css("color", "green");
</script>
</body>
</html>
输出:
方法2：使用jQuery库中的filter()和css()方法。这个方法与之前的方法很相似，但语法稍微干净和凝练。我们正在检查每个分部元素的数据属性的值是否等于字符串”open”，而不是字符串”valid”来过滤分部元素。
例子：在下面的例子中，数据属性被命名为data-state，所有被过滤的元素都用teal的字体颜色来设计。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
p {
font-size: 25px;
font-weight: bold;
}
div {
font-size: 20px;
font-weight: bold;
}
div:not(:last-child) {
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>jQuery - Filter Objects by Data Attribute Value</p>
<div class="geek-division" data-state="open">
Geek 1
</div>
<div class="geek-division" data-state="closed">
Geek 2
</div>
<div class="geek-division" data-state="open">
Geek 3
</div>
<div class="geek-division" data-state="closed">
Geek 4
</div>
<script type="text/javascript">
// Select all div elements with the
// class attribute containing "division"
$("div[class*=division]")
.filter("div[data-state=open]")
.css("color", "teal");
</script>
</body>
</html>
输出:
