Javascript 数组无法与 $.makeArray 一起正常工作

Question

我正在尝试使用 jQuery 从页面上的一组 div 中创建一个数组。我基本上想随机化它们的显示方式，所以目前，我只是想循环浏览它们。一切似乎都正常，除了我只看到最后一个数组项，即使它执行操作的次数与数组中的元素相同，并添加了正确的行为。

JS 是:

<script>
$(document).ready(function(){
    var obj = $('.item');
    var arr = $.makeArray(obj);
    $('.array').html('');

    $.each(arr, function(k,v){
        $('.array').html(v).fadeIn(250).delay(2000).fadeOut(250);
    });
});
</script>

标记是:

<div class="array">
    <div class="item">First</div>
    <div class="item">Second</div>
    <div class="item">Third</div>
    <div class="item">Fourth</div>
</div>

我不确定它是否相关，但这是 CSS，以防万一:

div.item {
    display: inline; float: left; width: 960px; height: 260px; font-family: helvetica; font-size: 10px; text-align: center; background: #eee; border:  solid 1px #888;
}

我得到的只是文本“Fourth”淡入淡出 4 次的 div。这告诉我它正在遍历数组(因为它正在使用计数)但为什么我只看到最后一个元素？大家有什么想法吗？

谢谢，

T

Answer 1

循环在循环的每次迭代中覆盖数组 div 的内容。因此您只能看到最后一次迭代的结果。

当您使用 .html(...) 时，它与 .empty().append(...) 相同。所以你循环做的是连续4次清空内容，只有最后一次清空之后的追加才会真正生效。

如果你希望元素一个接一个地淡入/淡出，你可以这样做:

$(document).ready(function(){
    var obj = $('.item');
    $('.array').html('');

    obj.each(function(i){
        $('.array').append($(this).hide().delay(i * 2500).fadeIn(250).delay(2000).fadeOut(250));
    });
});

你可以看到它在这里运行:http://jsfiddle.net/9Xg8X/