空jQuery时遍历列表并显示消息

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 中重置计数器，所以你总是得到最后一个ul 的li 元素的数量，即1。所以如果你重置在迭代所有ul 元素之前计数器，并在单击按钮时删除.notification 元素，然后您可以确定何时只剩下一个。 您可以尝试以下方法，

http://jsfiddle.net/Gd2kS/

js

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

EDIT - 对 cme​​ts 的响应（隐藏具有 .visuallyhidden 类的元素而不是删除元素）

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')
          &&  !$(this).is('.visuallyhidden')) {/*<- modify the condition*/
         console.log($(this));
          console.log('yes');
          counter ++;

      }
    });
  });
    console.log(counter);
    if(counter==1){
        alert("last one left!!");
    }else{
        /*modify the removal*/
        //$(this).parents('.notification').remove();
        $(this).parents('.notification').addClass("visuallyhidden");
    }
})