jquery：空行选择器计算换行符和空格

Question

问题：

如果.click()元素中没有DOM，我正尝试触发<ul></ul>事件。

此代码背后的思维过程是，当用户点击项目向左滑动的x，然后是来自DOM的.remove()。由于我精美的空白HTML，它的离开行和ul内的间距仍然存在。因此，我无法使if()语句正常运行。

即使使用$.trim()然后进行比较，仍然无法触发.click()事件。

HTML的图片

HTML

    <div class="btn-group pull-right nav-notice">
      <span class="badge badge-info nav-notice-button">8</span>
      <div class="notice-container">
        <span class="notice-arrow"></span>
        <ul class="notice-container-list">
          <li><span class="label label-warning">Warning</span><span class="notice-message">Warning 12315125</span><i class="notice-remove icon-remove-circle"></i></li>
          <li><span class="label label-success">success</span><span class="notice-message">Warning 12315125</span><i class="notice-remove icon-remove-circle"></i></li>
          <li><span class="label label-important">important</span><span class="notice-message">Warning 12315125</span><i class="notice-remove icon-remove-circle"></i></li>
        </ul>
      </div>
    </div>

的jQuery

//live(), looking for past/present DOM
$('.notice-remove').live( "click", function(){
    //no double dipping!
    $this = $(this);
    //Hide the x item, improves the animation a bit
    $this.hide();
    //animate the width of the li, to give it a slideoff effect
    //when the animate completes, remove the element from the DOM
    $this.parent('li').animate({
        width: "0"
    }, 'fast', '',
    function(){
        $(this).remove();
    });
    //get the html contents of the ul element
    var str = $('.notice-container-list').html();
    //trim the contents of the ul, and if they are exactly empty
    //fire the click event to close the container
    if( $.trim(str) === "" ){
        log('Closing the Notice');
        $('.nav-notice-button').click();
    }
});

Answer 1

我怀疑它会以这种方式运作。看，您在为它声明一些动画功能后立即检查元素。但是不会立即调用该函数 - 这就是animate（）的重点！而且，它转向，意味着当您检查<ul>内容时，它仍然不是空的。

请改用以下技巧：检查移除 <ul>时<li> 中剩余的元素数量;如果没有，请删除<ul>本身：

$this.parent('li').animate({
        width: "0"
    }, 'fast', '',
    function(){
        var $li = $(this);
        if (! $li.siblings().length) {
           $li.parent().remove();
        }
        else {
           $li.remove();
        }
    });

这是一个有效的jsFiddle（必须在<i></i>中添加一些texty，不能使用你的css'图标）。出于同样的原因，我使用简单的.parent().remove()而不是触发$('.nav-notice-button').click()，因为我不知道该点击应该怎么做。 ）

Answer 2

仅仅检查.notice-container-list是否有零孩子，而不是检查.html()是不是更好？