Question

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

的ONLY元素

＆＃13;

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

＆＃13;

.red{color:red;}

＆＃13;

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

＆＃13;

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过滤器方法

来解决此问题

＆＃13;

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

＆＃13;

.red{
color:red;
}

＆＃13;

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

＆＃13;

根据元素的数据属性

3 个答案: