javascript - 根据数据属性向元素添加类

Question

我正在处理以下示例。我如何使用数据属性 data-st="" 来过滤向元素添加类，如下所示？例如，我试图将 .red 添加到只有 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>

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

Thanks sam this is perfect. but just one more question ? How about to add the class to all other attribute BUT NOT to red ones? – Mona Coder 3 mins ago

您可以通过几种方式做到这一点:

• 使用[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>