Jquery是否为具有相同类的多个标记添加不同的样式

Question

我想向具有相同类的多个div元素添加一个类，但不想为所有元素添加相同的类。(所有div元素都是用jquery创建的，而不是在html中手动创建的，所以我不知道div中的值是"Yes"还是"No"，它是"random"(实例html:

<div class = "flag"> Yes </div>
<div class = "flag"> No </div>
<div class = "flag"> Yes </div>
<div class = "flag"> Yes </div>
<div class = "flag"> No </div>

css：

.yes{
color : green;
}
.no{
color : red;
}

我想为带有"yes"的div应用.eyes，为带有"no"的div使用.no。我试过了，但不起作用，或者它适用。是的，适用于所有div:

$(".flag").each(function(){ 
if($(".flag").text() == "yes"){
$(".flag").addClass("yes");
}else{
$(".flag").addClass("no");
}
});

Answer 1

这里有几个问题。

• 在添加类时选择每个.flag元素，而不是循环迭代中的元素。使用this关键字可以解决此问题
• 内容是Yes，而不是yes，JS区分大小写
• 该内容还包含空白，在进行比较之前需要删除这些空白。您可以使用trim()

$(".flag").each(function() {
if ($(this).text().trim() == "Yes") {
$(this).addClass("yes");
} else {
$(this).addClass("no");
}
});

.yes { color: green; }
.no { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flag"> Yes </div>
<div class="flag"> No </div>
<div class="flag"> Yes </div>
<div class="flag"> Yes </div>
<div class="flag"> No </div>

然而，通过使用隐式循环，通过向addClass()提供函数和三元表达式，可以更简单地实现这一点

$(".flag").addClass(function() {
return $(this).text().trim() == "Yes" ? 'yes' : 'no';
});

.yes { color: green; }
.no { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flag"> Yes </div>
<div class="flag"> No </div>
<div class="flag"> Yes </div>
<div class="flag"> Yes </div>
<div class="flag"> No </div>