javascript - .each() 行为怪异

Question

我有 6 个列表项

$('.favorite-tag-group li').each(function(){
  console.log("hi"); 
});

然而，此代码在控制台中显示“hi”24 次。

我唯一能想到的可能导致它出错的原因是我的列表项不在同一个列表中。

例如，.favorite-tag-group 是一个始终包含 ul 的 div。在某些情况下，那个 ul 将只有 1 个 li。有时它可能有 2 个。

这是一个可能看起来像的示例

div.favorite-tag-group
  ul
    li
    li
    li 
div.favorite-tag-group
  ul
    li
div.favorite-tag-group
  ul
    li
div.favorite-tag-group
  ul
    li
    li

我要做的就是运行 .each() li 以便我可以删除重复项 ;/

一些真正的 html:

<div class="favorite-tag-group">
  <h4>gobty</h4>

  <ul class="resources led-view">
    <li class="clearfix r-tutorial" data-id="22">

    </li>
  </ul>
</div>
<div class="favorite-tag-group">
  <h4>javascript</h4>

  <ul class="resources led-view">
    <li class="clearfix r-tutorial" data-id="24">

    </li>
  </ul>
</div>
<div class="favorite-tag-group">
  <h4>macvim</h4>

  <ul class="resources led-view">
    <li class="clearfix r-tool" data-id="21">

    </li>
  </ul>
</div>  

这是真正的功能。当我将 .each() 直接粘贴到控制台时它可以工作，但在这个函数内部它不起作用:

 // collapse tags functionality
    $('.collapse-tags').click(function(e){
        e.preventDefault();
        $('.favorites-helpers, .favorite-tag-group h4').slideUp(200, function(){
            var seen = {};
            $('.favorite-tag-group li').each(function(){
                //console.log("hi");
                var currentId = $(this).data('id');
                if (seen[currentId]) {
                    $(this).slideUp(200);
                } else {
                    seen[currentId] = true;
                }
            });
        });
    });

Answer 1

正如我在上面的评论中...有一点进一步的解释。

这是因为 $('.favorites-helpers, .favorite-tag-group h4') 将导致多个元素 slideUp()，因此回调被执行多次。将 var seen = {} 移动到回调内部会在每个回调中将变量重置为空对象。您仍然会多次遍历列表项(如多个 console.log() 所见)，但您会滑动相同的重复 li每次都这样。

你问:“我仍然感到困惑的一件事是，如果它在回调之外，为什么它不能看到 seen 的范围？变量范围不会说它可以看到它，因为它在函数之外吗？ "

是的，你是对的 - 回调可以看到 seen，但是 seen 从未被清空/重置，因此在你的回调的第二次迭代之后，你所有的li 会调用它们的 .slideUp()。

考虑一下:因为它要么向上滑动副本，要么将 id 添加到 seen，在第二个回调中，.each() 再次运行，但它已经填满了所有列表项 id。

希望这已经足够清楚了，如果不只是在下面评论的话，我会试着想出一些例子。