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() s），但每次都会以相同的方式滑动相同的副本li。

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

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

考虑这一点：因为它要么向上滑动副本，要么将id添加到seen，在第二个回调中，.each()再次运行，但它已经满了你的全部列出项目id s。

希望这很清楚，如果不仅仅是下面的评论，我会尝试提出一些例子。

Answer 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

.each（）表现得很奇怪

2 个答案: