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>

jQuery检查.each（）项目中的数组，然后为每个项目独立执行某项操作

1 个答案: