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

在本文中，我们将学习如何在 jQuery 中通过数据属性值过滤对象。有两种方法可以实现这一目标：

方法 1：使用 jQuery 库中的 this 属性和 filter()、data() 和 css() 方法。以下示例中定义了四个除法元素，每个元素都有一些数据属性及其对应的值。我们应用filter() 每个除法元素的方法，该方法将匿名函数作为其参数。此匿名函数返回布尔值true或false ，具体取决于每个除法元素的数据属性值是否等于特定字符串（字符串为“有效” ）。为了检查这一点，使用了data()方法，该方法将data-前缀后面的属性名称作为字符串参数。

在此之后，我们将css()方法与filter()方法链接起来，以根据上面讨论的功能对所有过滤的元素或对象应用一些样式。

示例：在下面的示例中，数据属性被命名为data-geek并且所有过滤的元素都被设置为字体颜色为green 。

HTML



  

    
  
    
    

  

    GeeksforGeeks
  
    jQuery - Filter Objects by Data Attribute Value
  
    
        Geek 1
    
    
        Geek 2
    
    
        Geek 3
    
    
        Geek 4

HTML



  

    
  
    
    

  

    GeeksforGeeks
  
    jQuery - Filter Objects by Data Attribute Value
  
    
        Geek 1
    
    
        Geek 2
    
    
        Geek 3
    
    
        Geek 4

输出：

方法 2：使用 jQuery 库中的 filter() 和 css() 方法。这种方法与以前的方法非常相似，但语法更简洁和简洁。我们正在检查每个除法元素的数据属性值是否等于字符串“open”而不是字符串“valid” ，以过滤除法元素。

示例：在下面的示例中，数据属性被命名为data-state并且所有过滤的元素都使用了青色字体颜色。

HTML



  

    
  
    
    

  

    GeeksforGeeks
  
    jQuery - Filter Objects by Data Attribute Value
  
    
        Geek 1
    
    
        Geek 2
    
    
        Geek 3
    
    
        Geek 4

输出：