javascript - 通过javascript向特定元素添加一个类并且不重复

Question

这是解释我想要的示例代码:

<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
</div>

jquery 的这段代码:

var $newDiv = $("<div/>")
.addClass("targetClass")
$(".someClass").append($newDiv);

结果是在第 3 个 div 中添加一个 TargetClass，并在第一个和第二个 div 中重复相同的类。

问题是我如何在最后一个 div 中添加类，而不是在另一个 div 中重复它。

Answer 1

根据您的代码判断，您希望将新的 div 作为 .someClass div 的同级元素而不是它的子元素。

只需替换这一行

 $(".someClass").append($newDiv);

通过

 $( "div[id]:not(:has(.targetClass))" ).append($newDiv); //will append new div to all those divs which doesn't have child element with targetclass

var $newDiv = $("<div/>").addClass("targetClass");
$( "div[id]:not(:has(.targetClass))" ).append($newDiv);

Demo