javascript - 循环中元素的显示顺序

Question

我有 3 个元素(#hotlink1Div、#topBarContentid、#hotlink2Div)，它们将处于循环中。

我设法找到了使循环在线的代码。目前它们出现的顺序是:#topBarContentid、#hotlink1Div、#hotlink2Div

我希望看到以下顺序:#topBarContentid、#hotlink1Div、#topBarContentid、#hotlink2Div、#topBarContentid。

slideHotlinks: function () {
    console.log(this.px + "Hotlinks started");
    var $elements = $('#hotlink1Div, #topBarContentid, #hotlink2Div');      //List of elements used
    function hotlinks_loop(index) {                         //Function to index elements as their are shown
        console.log(this.px + "Hotlinks loop created");
        $elements.eq(index).slideDown(1000, function() {
            var $self = $(this);
            setTimeout(function() {
                console.log(this.px + "Hotlinks timeout set");
                $self.fadeOut(1000);
                hotlinks_loop((index + 1) % $elements.length);
            },5000);
    });
}
hotlinks_loop(0); // start with the first element

Answer 1

怎么样:

var elements = ['#pointsbarDiv', '#hotlink1Div','#pointsbarDiv', '#hotlink2Div'];

function anim_loop(index) {
    $(elements[index]).slideDown(1000, function() {
        var $self = $(this);
        setTimeout(function() {
            $self.fadeOut(1000);
            anim_loop((index + 1) % elements.length);
        }, 5000);
    });
}

anim_loop(0); // start with the first element

摘自对原始 jsbin 的编辑:http://jsbin.com/uwonun/46

这使用 javascript 数组而不是 jquery 选择器。在 anim_loop 函数的第一行中，数组中的每个条目都被转换为一个 jquery 对象。

jquery 选择器与集合不完全相同，相反，它遍历页面的 dom 并返回与其表达式匹配的元素，按照它们在页面上出现的顺序。因此，不可能让选择器返回同一个元素两次。此外，页面中的 ID 应该是唯一的，因此选择器应该只为每个 ID 返回一个元素。