Запустить функцию для каждого элемента с тем же классом

У меня есть список элементов с одним и тем же классом, и я хотел бы проверить, есть ли у них контент под одним и тем же родителем. Если у него нет содержимого, добавьте класс

Итак, поскольку это один и тот же класс, мне нужно запустить функцию для каждого элемента и, после проверки, добавить или нет класс и продолжать проверять другие

Независимо от того, что я пытаюсь, я не могу заставить его работать

$(document).ready(function() {
  $(".description").each(function() {
    if ($.trim($(this).text()).length == 0) {
      $('.title').addClass('emptyDesc');
    }
  });
});
.emptyDesc{
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="title">TITLE</span>
    <span class="description"></span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>

  <li>
    <span class="title">TITLE</span>
    <span class="description">DESCRIPTION</span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>

  <li>
    <span class="title">TITLE</span>
    <span class="description"></span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>
  <ul>
0
0
174
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы добавляете emptyDesc к каждому заголовку в 4-й строке. Вам нужно получить ближайший заголовок вроде этого:

$(document).ready(function() {
  $(".description").each(function() {
    if ($.trim($(this).text()).length == 0) {
      $(this).siblings('.title').addClass('emptyDesc');
    }
  });
});
.emptyDesc{
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="title">TITLE</span>
    <span class="description"></span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>

  <li>
    <span class="title">TITLE</span>
    <span class="description">DESCRIPTION</span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>

  <li>
    <span class="title">TITLE</span>
    <span class="description"></span>
    <!-- Check whether it has description or not. If not, add class -->
  </li>
  <ul>

Найдите брата или сестру, а затем добавьте класс

 <script>
        $( document ).ready(function() {
        $( ".description" ).each(function() {
            if ( $.trim( $(this).text() ).length == 0 ) {
               $(this).siblings('.title').addClass('emptyDesc');
            }
            });
        });
      </script>

Попробуй это...

$(document).ready(function(){
  $('li>span').each(function(){
    if($(this).is(':empty')){
      $(this).prev().addClass('emptyDesc');
    }
  });
});
.emptyDesc {
  background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <span class="title">TITLE</span>
        <span class="description"></span>  <!-- Check whether it has description or not. If not, add class -->
    </li>

    <li>
        <span class="title">TITLE</span>
        <span class="description">DESCRIPTION</span>  <!-- Check whether it has description or not. If not, add class -->
    </li>

    <li>
        <span class="title">TITLE</span>
        <span class="description"></span>  <!-- Check whether it has description or not. If not, add class -->
    </li>
<ul>

Другие вопросы по теме