Jquery добавить другой стиль для нескольких тегов с одним и тем же классом?

Question

Я хочу добавить класс к нескольким элементам div с одним и тем же классом, но не добавлять один и тот же класс для всех. (все элементы div создаются с jquery, а не в html вручную, поэтому я не знаю, будет ли значение внутри div «Да» или «Нет», это «случайно») Пример 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 с «Да» и .no для div с «no». я пробовал это, но не работает, или это применимо .yes для всех div:

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

Answer 1

Здесь есть пара вопросов.

• Вы выбираете каждый элемент .flag при добавлении классов, а не тот, что в итерации l oop. Используйте ключевое слово 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>

Однако вы можете достичь этого гораздо проще, используя неявный l oop, предоставив функцию для 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>