javascript - .each()表现怪异

我有6个 list 项目

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

但是，此代码在控制台中显示24次“h​​i”。

我能想到的唯一一件事可能是导致其错误，因为我的列表项不在同一列表中。

例如，.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;
                }
            });
        });
    });

最佳答案

就像我在上面的评论中一样...还有一些进一步的解释。

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

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

是的，您是对的，回调可能会看到seen，但是seen从未清空/重置，因此，在回调的第二次迭代之后，所有li都将对其调用.slideUp()。

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

希望这已经足够清楚了，即使不仅仅是下面的评论，我也会尝试提出一些示例。