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”的 div 淡入淡出 4 次。这告诉我它可以很好地遍历数组（因为它正在使用计数）但是为什么我只看到最后一个元素？大家有什么想法吗？

谢谢，

T

Answer 1

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

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

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

$(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/

Answer 2

另外值得一提的是对效果方法的调用不会阻塞。这就是为什么循环在第一个效果发生之前就已经完成的原因。

你没有说你真正想要什么，但如果你想让每个元素一个接一个地出现/消失，你可以这样做：

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

    var count = obj.length;
    var target = $('.array');
    var display = function(i) {
        var element = $(obj[i]);
        var cb = (i < count-1) ? function(){display(i+1)} : function(){};
        element.appendTo(target).hide().fadeIn(250).delay(2000).fadeOut(250, cb);
    };
    display(0);
});

其实不用$.makeArray()。

DEMO