Question

我想在<section>为空时显示消息。在<section>内，我可以有一个未知数量的<ul>，其中包含未知数量的<li>。当我点击“x”按钮时，它会删除<li>。这是HTML：

<section>
  <ul>
    <li class="row  row--half-padding-top-bottom">
      <span>October 2013</span>
    </li>

    <li class="notification  notification--new">
      <span>
        <span>Franck Ribery</span>
        <span>Bayern Munich</span>
      </span>
      <span class="accept-ignore-container">
        <button class="js-animate-onclick--parent" title="Accept">Accept</button>
        <button class="js-connect-invite--ignore">&times;</button>
      </span>
    </li>
    <li class="notification  notification--new">
      <span>
        <span>Arjen Robben</span>
        <span>Bayern Munich</span>
      </span>
      <span class="accept-ignore-container">
        <button class="js-animate-onclick--parent" title="Accept">Accept</button>
        <button class="js-connect-invite--ignore">&times;</button>
      </span>
    </li>
  </ul>

  <ul>
    <li class="row  row--half-padding-top-bottom">
      <span>September 2013</span>
    </li>

    <li class="notification  notification--new">
      <span>
        <span>Franck Ribery</span>
        <span>Bayern Munich</span>
      </span>
      <span class="accept-ignore-container">
        <button class="js-animate-onclick--parent" title="Accept">Accept</button>
        <button class="js-connect-invite--ignore">&times;</button>
      </span>
    </li>
  </ul>
</section>

我想忽略显示日期的<li>元素（因此“空”，因为它不是真的空）。为此，我会检查<li>是否有类.notification。如果有，请增加计数器。我点击具有班级.js-connect-invite--ignore的“x”按钮后执行此操作：

var counter;
$('.js-connect-invite--ignore').on('click touchstart', function() {
  var ul = $(this).closest('section').children();

  $(ul).each(function() {
    var li = $(this).children();
    counter = 0;

    $(li).each(function() {
      if ($(this).is('.notification')) {
        console.log('yes');
        counter ++;
      }
    })
  })
  console.log(counter);
})

请参阅演示：http://jsfiddle.net/CCECK/

然而，由于逻辑错误，它无法正常工作。我需要添加两个计数器吗？

如何点击“x”检查所有其他元素，如果这是最后<li class="notification">显示警告？谢谢！

Answer 1

基本上你在每个 ul内重置了计数器，所以你总是得到最后li的{{1}}个元素的数量，即1因此，如果您在迭代所有ul元素之前重置计数器，并在单击按钮时删除ul元素，那么您可以找出何时只剩下一个元素。您可以尝试以下方法，

http://jsfiddle.net/Gd2kS/

<强> JS

.notification

编辑 - 对评论的回复（隐藏使用类var counter; $('.js-connect-invite--ignore').on('click touchstart', function() { var ul = $(this).closest('section').children(); counter = 0; $(ul).each(function() { var li = $(this).children(); $(li).each(function() { if ($(this).is('.notification')) { console.log('yes'); counter ++; } }); }); console.log(counter); if(counter==1){ alert("last one left!!"); }else{ $(this).parents('.notification').remove(); } })的元素而不是删除元素）

.visuallyhidden

在空jQuery时迭代列表并显示消息

1 个答案: