jQuery проверяет массив в элементе .each (), затем делает что-то для каждого элемента независимо

Question

У меня проблемы с пониманием того, как .each () может помочь мне в этом сценарии. У меня есть список ораторов в карусели. У каждого докладчика разные роли. Роли выводятся моей CMS. Я хочу проверить выходные роли каждого оратора, выполнить оператор if, а затем распечатать соответствующий значок для каждого оратора в зависимости от их роли.

Вот так выглядит мой HTML-код:

<ul class="slider-carousel">
    <li class="speaker-item">
        <h3>Speaker name</h3>
        <div class="speaker-badge"></div>
        <div class="speaker-role">
            <ul class="role">               
                <li>Panelist</li>
                <li>Committee Member</li>
            </ul>
        </div>
    </li>
    <li class="speaker-item">
        <h3>Speaker name</h3>
        <div class="speaker-badge"></div>
        <div class="speaker-role">
            <ul class="role">
                <li>Co-Chair</li>
                <li>Committee Member</li>
            </ul>
        </div>
    </li>
    <li class="speaker-item">
        <h3>Speaker name</h3>
        <div class="speaker-badge"></div>
        <div class="speaker-role">
            <ul class="role">
                <li>Committee Member</li>
            </ul>
        </div>
    </li>
    <li class="speaker-item">
        <h3>Speaker name</h3>
        <div class="speaker-badge"></div>
        <div class="speaker-role">
            <ul class="role">
                <li>Speaker</li>
            </ul>
        </div>
    </li>   
</ul>

когда я пытаюсь проверить каждый элемент с помощью этого кода, он печатает значок комитета для всех элементов, даже если у докладчика нет роли комитета в коде HTML:

$('.slider-carousel li').each( function() { 
    $('.speaker-role .role li').each(function(){
        var speakerRole =  $(this).text();
            if (speakerRole.indexOf('Committee Member')) {
                $('.speaker-badge').text('Committee Badge')
            }
    }); 
});

Answer 1

Вам нужно использовать this для ссылки на элемент, который повторяется в каждом вашем вызове. Так что измените:

$('.speaker-badge').text('Committee Badge')

на

$(this).closest('.speaker-role').prev('.speaker-badge').text('Committee Badge')

Это будет проходить через DOM относительно ваших элементов списка, поднимаясь вверх через .closest(), затем к предыдущему брату через .prev()

Кроме того, вам нужно изменить if на if (speakerRole.indexOf('Committee Member')>-1)>, когда он найдет совпадение, он будет равен 0, что означает, что он нашел совпадение, но оценивается как ложное.

$('.slider-carousel li').each(function() {
  $('.speaker-role .role li').each(function() {
    var speakerRole = $(this).text();
    if (speakerRole.indexOf('Committee Member') > -1) {
      $(this).closest('.speaker-role').prev('.speaker-badge').text('Committee Badge')
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="slider-carousel">
  <li class="speaker-item">
    <h3>Speaker name</h3>
    <div class="speaker-badge"></div>
    <div class="speaker-role">
      <ul class="role">
        <li>Panelist</li>
        <li>Committee Member</li>
      </ul>
    </div>
  </li>
  <li class="speaker-item">
    <h3>Speaker name</h3>
    <div class="speaker-badge"></div>
    <div class="speaker-role">
      <ul class="role">
        <li>Co-Chair</li>
        <li>Committee Member</li>
      </ul>
    </div>
  </li>
  <li class="speaker-item">
    <h3>Speaker name</h3>
    <div class="speaker-badge"></div>
    <div class="speaker-role">
      <ul class="role">
        <li>Committee Member</li>
      </ul>
    </div>
  </li>
  <li class="speaker-item">
    <h3>Speaker name</h3>
    <div class="speaker-badge"></div>
    <div class="speaker-role">
      <ul class="role">
        <li>Speaker</li>
      </ul>
    </div>
  </li>
</ul>