如何在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>

输出:

如何在jQuery中通过数据属性值过滤对象？

方法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>