CODEWITHSUNDEEP
jquery
hnnnng
hnnnng

Reputation: 495

jQuery check the array in .each() item then do something for each item independently

I am having a problem understanding how .each() can help me in this scenario. I have a list of speakers in a carousel. Each speaker has different roles. The roles are being outputted by my CMS. I want to check the outputted roles of each speaker, run an if statement and then print an appropriate badge for each speaker depending on their role.

This is how my HTML looks like:

<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>

when I try to check each item with this code, it prints Committee Badge for all items even if the speaker does not have the Committee role in the HTML code:

$('.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')
            }
    }); 
});

Upvotes: 0

Views: 46

Answers (1)

j08691
j08691

Reputation: 207901

You need to use this to refer to the element being looped over in your each call. So change:

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

to 

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

This will traverse the DOM relative to your list items, going up via .closest(), then to the previous sibling via .prev()

Additionally you need to change your if to if (speakerRole.indexOf('Committee Member')>-1)> when it finds a match it will equal 0 which means it found a match but will evaluate to false.

$('.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>

Upvotes: 3

Related Questions