如何添加第n個項目類別與jQuery

http://jsfiddle.net/JamesKyle/y7hBQ/如何添加第n個項目類別與jQuery

我做一個簡單的jQuery計數功能，增加了以下類：

首先&最後

即使&奇數

nth-item-＃（依次計數）

第n項 - ＃（向後計數）

我有前兩個很容易做到，但兩個是給我找麻煩，因爲我是新來的jQuery/JavaScript的

你可以在這裏看到的jsfiddle： http://jsfiddle.net/JamesKyle/y7hBQ/

這是我目前使用的代碼：

$(document).ready(function() { 
    $('.count, ul').each(function() { 

     var countChildren = $(this).children(); 

     $(countChildren).filter(':even').addClass('even'); 
     $(countChildren).filter(':odd').addClass('odd'); 
     $(countChildren).first().addClass('first'); 
     $(countChildren).last().addClass('last'); 

     var numberOfChildren = $(countChildren).size(); 

     // $(countChildren).addClass('nth-item-' + #); 
     //          ⬆ 
     //       Fill with the elements number 

     // $(countChildren).addClass('nth-item--' + #); 
     //           ⬆ 
     //     Fill with the elements number (negative count) 
    }); 
});

我只專注於註釋掉線

在這裏再次是的jsfiddle： http://jsfiddle.net/JamesKyle/y7hBQ/

提前

謝謝！

UPDATE：

我有如下兩種解決方案，我打算用這個一個非常大的規模，所以如果你能推薦什麼是最有效的方法，這將有助於我很多！謝謝！！

來源

2011-11-30 James Kyle

爲了您的工作效率，請檢查我的答案。爲了獲得最高效的解決方案，您必須更接近原生JavaScript。 –

如果每個效率值都計算在內，那麼您應該考慮減少迭代次數;

$('.count, ul').each(function() { 
    var $children = $(this).children(), 
     count = $children.size(), 
     $item; 
    $children.each(function(i) { 
     $item = $(this) 
      .addClass(i % 2 === 0 ? 'even' : 'odd') 
      .addClass('nth-item-' + (i + 1)) 
      .addClass('nth-item--' + (count - i)); 
     if (i === 0) { 
      $item.addClass('first'); 
     } 
     if (i == count - 1) { 
      $item.addClass('last'); 
     } 
    }); 
});

這樣你只能對孩子迭代一次。當您使用過濾器時，它會根據您的過濾器迭代和過濾項目。 jsFiddle here。

一點基準是here。

來源

2011-11-30 22:09:05

出色的工作，我需要學習如何做你做的基準測試 –

順便說一句，我不希望他們在第n項上是0計數，我會更新你的答案 –

我錯過了。更新了我的答案。 –

編輯：見this fiddle爲純CSS解決方案。它不需要任何JavaScript（使用:nth-child選擇器）。

使用.index()方法在元素的集合，以獲得當前元素的索引。另外，因爲.children()返回一個jQuery對象，所以不需要將countChildren換成$。

爲了清楚起見，下面的代碼使用開始於1和-1指標（如在你的CSS代碼暗示）。

演示：http://jsfiddle.net/y7hBQ/18/

$(document).ready(function() { 
    $('.count, ul').each(function() { 

     var countChildren = $(this).children(); 

     countChildren.filter(':even').addClass('even'); 
     countChildren.filter(':odd').addClass('odd'); 
     countChildren.first().addClass('first'); 
     countChildren.last().addClass('last'); 

     var numberOfChildren = countChildren.size(); 

     countChildren.each(function(i){ 
      var posindex = countChildren.index(this) + 1, 
         //^ This can be replaced by i + 1, for efficiency 
       negindex = numberOfChildren - posindex + 1; 
      $(this).addClass('nth-item-' + posindex) 
        .addClass('nth-item--' + negindex); 
     }); 

    }); 
});

來源

2011-11-30 21:44:04

可以通過用countChildren.size（）替換實例來擺脫'numberOfChildren'變量嗎？ –

效率不高。由於.size（）總是返回相同的值，因此最好緩存該值。設想你的樹有2000個元素的大小。這會導致2000個額外的函數調用。 –

噢好吧，那就不要理會我的編輯了，謝謝！ –

如果我理解正確的話，這一點：

$(document).ready(function() { 
    $('.count, ul').each(function() { 

     var countChildren = $(this).children(); 

     countChildren.filter(':even').addClass('even'); 
     countChildren.filter(':odd').addClass('odd'); 
     countChildren.first().addClass('first'); 
     countChildren.last().addClass('last'); 

     var numberOfChildren = countChildren.size(); 

     countChildren.each(function(i) { 
      $(this).addClass('nth-item-' + (i + 1)) 
        .addClass('nth-item--' + (numberOfChildren - i)); 
     }); 
    }); 
});

jsFiddle

來源

2011-11-30 21:47:25 simshaun

這比@Rob W的上面的答案更有效嗎？ –

我和他的實際上都是一樣的，因爲他的評論是「//爲了提高效率，這可以用i + 1來代替。調用'jQuery.index（）'會花費一點點，但是很簡單。 – simshaun

那麼我打算在一個非常大的規模上使用這個，所以每個效率都很重要 –

我知道你在尋找的是：

var count = countChildren.length; 
countChildren.each(function(index) { 
    $(this).addClass('nth-item-'+index); 
      .addClass('nth-item--'+(count-1-index)); 
});

可能有更快的方法來做到這一點，但......希望這對你有用。

來源

2011-11-30 21:47:34

如何添加第n個項目類別與jQuery

回答

相關問題