Question

我有以下jQuery，

function animTweets($tweets) {
    $tweets.each(function () {
        var $tweet = $(this);
        $('#twitterTile').queue('myQueue', function (next) {
            $tweet.animate({top: 0, height: 'show'},
                        {duration: 300,
                         queue: false,
                         complete: next
                        });
        }).delay(1E10, 'myQueue');
    });
}

它遍历列表中包含的项目（$ tweets）。

如何创建if语句，以便最后一项具有不同的动画？

Answer 1

您可以使用.length获取推文总数，然后使用index公开的.each()进行检查，以检查当前index是否为最后一个：

function animTweets($tweets) {
    var total = $tweets.length;
    $tweets.each(function (index, obj) {
        var $tweet = $(this);
        if ((index + 1) == total) {
            //this is the last one
        } else {
            $('#twitterTile').queue('myQueue', function (next) {
                $tweet.animate({top: 0, height: 'show'},
                            {duration: 300,
                             queue: false,
                             complete: next
                            });
            }).delay(1E10, 'myQueue');
        }
    });
}

.each()的文档：http://api.jquery.com/each

Answer 2

$tweets.each(function (index) {
    if(index == $tweets.length-1) {
    //special behavior
    }
});

Answer 3

function animTweets($tweets) {
    var len =  $tweets.length;
    var count = 1;
    $tweets.each(function () {
        var $tweet = $(this);
        if(len  == count ){
           //different anim
        }else{
          $('#twitterTile').queue('myQueue', function (next) {
             $tweet.animate({top: 0, height: 'show'},
                        {duration: 300,
                         queue: false,
                         complete: next
                        });
          }).delay(1E10, 'myQueue');
        }
        count++;
    });
}

Answer 4

如何使用.slice() ^[docs]和.last() ^[docs]：

$tweets.slice(0, -1).each(...);
var $lastTweet = $tweets.last();
// do something with the last tweet.

Answer 5

有时我们会忘记.each()并不总是比旧的for循环好，因为我们失去了对迭代的控制。假设animTweets的参数是jQuery对象，你可以像这样使用for循环：

function animTweets($tweets) {
    var $tweet;
    for (var i = 0, len = $tweets.length - 1; i < len; i++) {
        $tweet = $tweets.eq(i);
        $('#twitterTile').queue('myQueue', function (next) {
            $tweet.animate({top: 0, height: 'show'},
                        {duration: 300,
                         queue: false,
                         complete: next
                        });
        }).delay(1E10, 'myQueue');
    }
    // now process the last one separately
    tweet$ = $tweets.eq(-1);
    // ...
}

.each（）找到最后一项并创建一个if语句

5 个答案: