JQuery .each()循环继续循环

2019年8月5日 232次阅读

我有一个jQuery .each()循环,我想继续循环.在我目前的小提琴中,它会循环播放,从一切开始,但是我似乎无法获得各种数量的li的正确时机.无论有多少列表项,我希望这个循环工作.

https://jsfiddle.net/ewsQ7/1662/

// add class first to first li
$('.js-ifeature li').first().addClass('message-first js-selected');

// add class last to last li
$('.js-ifeature li').last().addClass('message-last');

//set height
$('.js-ifeature').css('height', $('.js-ifeature li').height()+'px');

var time = 1000;
var alltheitems = $('.js-ifeature li').size();

function eachChange(){
    $('.js-ifeature li').each(function(i) {
        $(this).hide();
        $(this).delay(time * i).fadeIn(time).fadeOut(time);
        if ($(this).hasClass('message-last')) {
            setTimeout(eachChange, (alltheitems) * time);
        }
    });
}
eachChange();

最佳答案 对于不那么常用的换档方法,这是一个方便的情况.但是由于jQuery集合不是数组而是类似数组的对象,所以你必须将shift方法填充到jQuery上：

此外,你应该等到fadeOut完成之后再进行下一次调用,因为浏览器可能会被阻塞,你最终会得到一堆动画……这并不好.

http://jsfiddle.net/xwuo9cpy/2/

var $featue = $('.js-ifeature'),
    $items = $featue.find('li'),
    time = 1000;

//set height
$featue.css('height', $items.first().height()+'px');
$items.hide();

// shim the shift method
$.fn.shift = Array.prototype.shift;

!function eachChange(){
    var item = $items.shift();
    $(item).fadeIn(time).fadeOut(time, eachChange);
    $items.push(item);
}();
点赞