根据元素的数据属性向元素添加类

Question

我正在研究以下示例。 我如何使用数据属性data-st=""过滤添加类到元素如下？ 例如，我试图将.red添加到ONLY元素，其中data-st="red"

  $("button").click(function(){ $("p").each(function(){ $(this).addClass('red'); }); }); 

 .red{color:red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Apply</button> <p class="" data-st="green"> App </p> <p class="" data-st="red"> App </p> <p class="" data-st="black"> App </p> <p class="" data-st="green"> App </p> <p class="" data-st="red"> App </p> <p class="" data-st="blue"> App </p> <p class="" data-st="green"> App </p> 

Answer 1

使用[data-st=red]

 $("#a1").click(function(){ $("p[data-st!=red]").each(function(){ $(this).addClass('red'); }); }); $("#a1").click(function(){ $("p[data-st!=red]").each(function(){ $(this).addClass('red'); }); }); 

 .red{color:red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="a1">Apply 1</button> <button id="a2">Apply 2</button> <p class="" data-st="green"> App </p> <p class="" data-st="red"> App </p> <p class="" data-st="black"> App </p> <p class="" data-st="green"> App </p> <p class="" data-st="red"> App </p> <p class="" data-st="blue"> App </p> <p class="" data-st="green"> App </p> 

编辑在评论中回答您的问题

谢谢山姆，这是完美的。 但还有一个问题呢？ 如何将类添加到所有其他属性但不是红色的？ - Mona Coder 3分钟前

您可以通过以下几种方式实现这一目标：

• 使用[data-st!=red]
• 使用.not()方法$('p').not('p[data-st=red]')

 $("#a1").click(function() { $("p[data-st!=red]").each(function() { $(this).addClass('red'); }); }); $("#a2").click(function() { $("p").not("p[data-st=red]").each(function() { $(this).addClass('red'); }); }); 

 .red { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="a1">Apply 1</button> <button id="a2">Apply 2</button> <p class="" data-st="green"> App </p> <p class="" data-st="red"> App </p> <p class="" data-st="black"> App </p> <p class="" data-st="green"> App </p> <p class="" data-st="red"> App </p> <p class="" data-st="blue"> App </p> <p class="" data-st="green"> App </p> 

Answer 2

您可以使用更具体的选择器，如p[data-st="red"]

此外，jquery方法（ 除非它们返回值 ）将应用于选择中的所有元素。 所以在你的情况下你可以跳过.each

$('p[data-st="red"]').addClass('red');

如果您的逻辑更复杂，并且您希望根据属性的值执行不同的操作，则可以使用.data来提取值并相应地执行操作

$('p[data-st]').each(function(){
   var self = $(this),
       st = self.data('st');

   switch (st){
        case "red":
                  // do things here if data-st was red
                  self.addClass('red');
                  break;
        case "green":
                  // do things here if data-st was green
                  break;
        default:  
                  // do things here if data-st did not match any of the above cases 
   }   

});

Answer 3

您可以使用jquery过滤器方法解决此解决方案

  $(function(){ $('button').click(function(){ $('p').filter('[data-st="red"]').addClass('red'); }) }); 

 .red{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Apply</button> <p class="" data-st="green"> App </p> <p class="" data-st="red"> App </p> <p class="" data-st="black"> App </p> <p class="" data-st="green"> App </p> <p class="" data-st="red"> App </p> <p class="" data-st="blue"> App </p> <p class="" data-st="green"> App </p>