如何針對每兩個列表，而不是偶數或奇數

列表項正如標題所說，我想給每2列出了不同顏色的BG與jQuery ... 例如：提前如何針對每兩個列表，而不是偶數或奇數

<li><!-- blue --></li> 
<li><!-- blue --></li> 
<li><!-- red --></li> 
<li><!-- red --></li>

謝謝！

更新：下面的代碼表示奇數和偶數名單，我不知道是否有每2所列出的目標這樣的...而不是:odd或:even我怎麼能做到這一點的方法嗎？

$("li:odd").addClass("blue"); 
$("li:even").addClass("red");

來源

2011-12-23 Nima

給一些細節 – Dau 2011-12-23 09:48:05

演示：http://jsfiddle.net/gRjv7/1/

$('li').each(function(index){ 
    if(Math.floor(index/2)%2==0){ 
     $(this).css('color','blue'); 
    }else{ 
     $(this).css('color','red'); 
    }; 
});

來源

2011-12-23 09:53:23 welldan97

'parseInt'沒有必要。爲了將來的參考，如果你使用未知數字的'parseInt'，指定base，以防止'010'轉換爲'8'：'parseInt（index，10）'。爲了提高效率，'$（this）'也應該保存在一個變量中，以防止多次不必要的函數調用。 – 2011-12-23 09:58:03

謝謝你的回答。 – Nima 2011-12-23 10:04:10

羅布，這很好，我會牢記這一點，並按照你的說法去做。 – Nima 2011-12-23 10:05:27

編輯：在速度，最高效的jQuery溶液而言（沒有sacrifying可讀性）：

$("li").each(function(i){ 
    i = i % 4; 
    if (i <= 1) {  // In this context, Equivalent to i == 0 || i == 1 
     $(this).addClass("blue"); // If you're going to use multiple 
            // $(this)s, cache the variable. 
    } else {   // Since we're calculating modulo 4, the ELSE condition 
     $(this).addClass("red"); // is equivalent to i == 2 || i == 3 
    } 
});

使用模運算符的集合LIS的減少到4（0,1 ，2，3）。然後，使用 .filter()方法將兩個子集中的集合分開。

演示：http://jsfiddle.net/pN5HT/1/

var allLi = $("li"); 
var li12 = allLi.filter(function(i){ 
    i = i % 4; 
    return i == 0 || i == 1; // Or return i <= 1; 
}); 
var li34 = allLi.filter(function(i){ 
    i = i % 4; 
    return i == 2 || i == 3; // Or return i >= 2; 
}); 
// Simple demo: 
li12.css('background-color','blue'); 
li34.css('background-color','red');

而不是硬編碼在JavaScript的風格，我建議使用類名來代替：

.blue {background-color:blue;} 
.red {background-color:red;} 
/*JavaScript:*/ li12.addClass("blue");

來源

2011-12-23 09:50:30

非常感謝您的時間和共享。 :) – Nima 2011-12-23 09:59:48

類似的代碼方法可以用jQuery來完成。如果你的HTML有，你可以在jQuery的referecne如下

<ul class="colors"> 
<li><!-- blue --></li> 
<li><!-- blue --></li> 
<li><!-- red --></li> 
<li><!-- red --></li> 
</ul>

列表然後你可以在jQuery中得到這個。

$(document).ready(function(){ 
    var i = 0; 
    var grouplength = 2; 
    var red = false; 
    $("ul.colors li").each(function() { 
     if(i >= grouplength) { 
      red = !red; 
      i = 0; 
     } 
     if(red) { 
      this.style.backgroundColor = "#ff0000"; 
     } 
     else { 
      this.style.backgroundColor = "#0000ff"; 
     } 
     i++; 
    }); 
});

如果你需要更多的顏色，你可以很容易地從作爲一個布爾值，數字選擇器改變「紅」，改變它的分組長度。

來源

2011-12-23 10:03:45 akuyume

只是一個漂亮的方式來實現這一目標：

DEMO jsFiddle

$('li').each(function(i){ 
    $(this).eq(i%4).next().andSelf().addClass('red'); 
});

來源

2011-12-23 10:29:59

是啊！我喜歡這一點，非常感謝分享！ – Nima 2011-12-23 10:52:59

@nima：D很高興喜歡它！非常簡單和邏輯。快樂編碼 – 2011-12-23 11:30:04

當然可以！多謝，夥計：） – Nima 2011-12-23 14:12:26

如何針對每兩個列表，而不是偶數或奇數

回答

相關問題