在空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.如果有,请增加计数器.单击具有类的"x"按钮时,我这样做.js-connect-invite--ignore:

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

基本上，您重置了every 中的计数器ul，因此您总是会得到li最后一个元素的数量ul，即 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();
    }
})

编辑 - 对评论的响应（隐藏带有类的元素.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");
    }
})