如何清理此jQuery函数？

Question

我想将此功能浓缩为一些迭代器。 如何清除此功能？

所有这些都需要按顺序执行，例如：当一个函数返回时，下一个函数开始。 所有奇数子项都应在淡入后淡出，所有偶子子均应淡入且不淡出。

请注意，此代码在CoffeeScript中，因此没有分号。

在第8个孩子之后，我也遇到了问题（例如，如果我继续使用'.title-sword：nth-​​child（9）等），该功能将停止工作。 我的想法是深度嵌入功能有限，但我无法验证这一点。

$('.title-sword:nth-child(2)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', ->
    $('.title-sword:nth-child(3)').css('visibility', 'visible').hide().fadeIn('fast', ->
        $('.title-sword:nth-child(4)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', ->
            $('.title-sword:nth-child(5)').css('visibility', 'visible').hide().fadeIn('fast', ->
                $('.title-sword:nth-child(6)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', ->
                    $('.title-sword:nth-child(7)').css('visibility', 'visible').hide().fadeIn('fast', ->
                        $('.title-sword:nth-child(8)').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast')
                    )
                )
            ) 
        )
    )
)

Answer 1

尝试这样的事情（没有CoffeeScript，因为我只是一个普通的JS家伙）：

(function() {
    var i=2, elm,
        step = function() {
            elm = $('.title-sword:nth-child('+i+')');
            if( !elm) return;
            elm.css('visibility','visible').hide();
            if( i%2 == 0) elm.fadeIn('fast').fadeOut('fast',step);
            else elm.fadeIn('fast',step);
            i++;
        };
    step();
})();

该代码将从第二个孩子开始运行所需的功能，并重复执行直到没有更多孩子为止。

Answer 2

尝试这个：

$('.title-sword:nth-child(n+2):not(:nth-child(n+9))').css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast')

http://jsfiddle.net/RfHj2/1/

Answer 3

假设元素都是兄弟姐妹，这应该起作用：

function doFades($el){
    $el.css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', function(){
            var $next=$(this).next();
            if($next.length){
                doFades( $next);
            }
    }); 
}

doFades( $('.title-sword:nth-child(2)') );

我不熟悉coffeescript语法，但应该易于修改

Answer 4

我更喜欢只运行一次选择器操作，然后遍历结果。 这是可以用于您的目的的通用函数：

fadeInOutChildren(parentSelector, lowChild, highChild) {
    var items = $(parentSelector).children();
    var index = lowChild;

    function next() {
        if (index <= highChild) {
            items.eq(index++).css('visibility', 'visible').hide().fadeIn('fast').fadeOut('fast', next);
        }
    }
    next();
}

fadeInOutChildren(".title-sword", 1, 7);