.each() 行为怪异

Posted 2023-05-08

【中文标题】.each() 行为怪异

【英文标题】：.each() acting weird

【发布时间】：2012-08-05 02:48:14

【问题描述】：

我有 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;
                
            );
        );
    );

【问题讨论】：

根据您的问题中的示例，您希望hi 出现多少次？

在上面的例子中，6次。

啊.. 是的，7. 我的错。我希望 7. 实际上，我得到列表项的数量 * 组的数量......所以 28

对我来说很好用：jsfiddle.net/ECS2K Chrome/Win7

@Tallboy，这是因为$('.favorites-helpers, .favorite-tag-group h4') 将导致多个元素到slideUp()，因此回调被多次执行。将var seen = 移动到回调内部会将变量重置为每个回调中的空对象。您仍然会多次迭代您的列表项（如多个console.log()s 所见），但您每次都会以这种方式向上滑动相同的重复li。希望你能学到一些东西！

【参考方案1】：

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

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

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

是的，你是对的 - 回调可以看到 seen，但 seen 从未被清空/重置，因此在你的回调的第二次迭代之后，你所有的 li 都会有 @987654331 @ 呼唤他们。

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

希望这足够清楚，如果不只是在下面发表评论，我会尝试提出一些示例。

【讨论】：

哦，对了！ Yesssss 吸收所有理解的力量 YESSSSS

@Tallboy - 这也可能对你有所帮助：***.com/questions/2432267/… 这里他们谈论检查是否有任何元素被动画化（使用.is(':animated')），然后在条件条件下执行任何进一步的代码陈述。或者这个：***.com/questions/8793246/… 他们使用.promise().done()

【参考方案2】：

先生，您来了……

$(document).ready(function()
    $("div.favorite-tag-group>ul").children("li").each(function(index,element)
         //code here
        //refer to element as $(element)
         //to get the id of the element use: $(element).attr("id");
      );
);​

演示：http://jsfiddle.net/9uz8k/11/

链接：

http://api.jquery.com/each

【讨论】：

function(element,index)?或function(index, element)？ jsfiddle.net/9uz8k/9

是的，api.jquery.com/each 去看看参数。 .each( function(index, Element) )

哇哦！对于那个很抱歉！谢谢你说出我的愚蠢。我做了必要的更正。

这个答案仍然没有解决手头的问题。虽然标题有点误导，但实际上是在.each() 之前多次触发的回调。在这种情况下，您的回答无济于事...-1。