如何清理這個jQuery函數？

我有這個功能，我想濃縮成一些迭代器。如何清理這個功能？如何清理這個jQuery函數？

所有需要按順序操作，如下所示：當一個函數返回時，下一個函數開始。所有奇怪的孩子在退學後都應該淡出，所有的孩子都應該淡入，而不是淡出。

請注意，這段代碼在CoffeeScript中，所以沒有分號。

我在第八個孩子後還有一個問題（例如，如果我繼續'.title-sword：第n個孩子（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') 
        ) 
       ) 
      ) 
     ) 
    ) 
)

來源

2012-06-17 Verdi Erel Ergün

你可以很容易地做一個（種）遞歸函數，傳遞選擇和運行索引。雖然可能取決於你的實際標記。如果您只能訪問第X個選定元素，我會避免一遍又一遍地使用'.title-sword：nth-child（X）'。 –

正常循環有什麼問題嗎？ – Niko

@Niko：正常循環不會等待動畫。我不認爲這是可能的。 –

嘗試是這樣的（無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(); 
})();

此代碼將從第二個孩子開始運行所需的功能，並重復，直到沒有更多的孩子德倫。

來源

2012-06-17 21:44:14

'！elm'需要'！elm.length' – charlietfl

@charlietfl爲什麼？如果'elm'爲空，試圖獲得'elm.length'會導致錯誤。 –

'elm'永遠不會爲空，因爲'$（）'函數會在傳遞一個選擇器時總是返回一個jQuery對象（但可能是一個「0」長度的「空」）。 – nnnnnn

試試這個：

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

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

來源

2012-06-17 21:42:37 undefined

假設元素都是兄弟姐妹，這應該工作：

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的語法，但應該很容易修改

來源

2012-06-17 21:45:20 charlietfl

我喜歡運行選擇操作了一次，並且然後遍歷該結果。這裏有一個通用的函數可以用於你的目的：

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);

來源

2012-06-17 22:20:18 jfriend00

如何清理這個jQuery函數？

回答

相關問題