分配ODD/EVEN類以跨度使用jquery/javascript

我剛剛分配了ODD/EVEN類來跨越JQuery。分配ODD/EVEN類以跨度使用jquery/javascript

問題已更新

我需要添加類山坳DIV中跨度「奇」/ 「甚至」。檢查註釋的類名和執行順序&我需要用這種方式分配。

預期輸出：類名是在評論

<section> 

    <div class="col"> 
     <span></span> <!-- ODD --> (1) 
     <span></span> <!-- ODD --> (5) 
     <span></span> <!-- EVEN--> (8) 
     <span></span> <!-- ODD--> (10) 
     <span></span><!-- EVEN--> (11) 
    </div> 

    <div class="col"> 
     <span></span><!-- EVEN--> (2) 
     <span></span><!-- ODD--> (6) 
     <span></span><!-- EVEN--> (9) 
    </div> 

    <div class="col"> 
     <span></span><!-- ODD --> (3) 

    </div> 
    <div class="col"> 
     <span></span><!-- EVEN--> (4) 
     <span></span><!-- ODD--> (7) 
    </div> 

</section>

來源

2013-06-30 Parthi04

請大家查看評論類的名稱。我沒有分配奇數偶數或每個列。即時查找奇數甚至整體跨度 – Parthi04

如果您自己迭代跨度收集，您可以有這樣的控制。看到我的答案。 – OzrenTkalcecKrznaric

@OzrenTkalčecKrznarić請檢查我更新的問題 – Parthi04

看這個working jsFiddle。

$(function(){ 
    $('.col > span:odd').addClass('odd'); 
    $('.col > span:even').addClass('even'); 
});

使用.col >確保您不會影響頁面上的其他跨度。

我根據新要求更新了jsFiddle。

$(function(){ 
    var currentClass = 'odd'; 
    var currentRow = 0; 
    var updated = true; 

    while(updated){ 
     updated = false; 
     $('.col').each(function(index,value){ 
      var currentSpans = $(value).find('span'); 
      if(currentRow < currentSpans.length){ 
       currentSpans.eq(currentRow).addClass(currentClass); 
       currentClass = (currentClass == 'odd') ? 'even':'odd'; 
       updated = true; 
      } 
      if($(value).is(':last-child')){ 
       currentRow++; 
      } 
     }) 
    } 
});

來源

2013-06-30 13:20:54

更新了JS小提琴 http://jsfiddle.net/tusharmathur/MbEVa/2/ – Tushar

請檢查我更新的問題 – Parthi04

增加更新的jsFiddle以適應新的需求 –

基本答案：

$('span:odd').addClass("odd"); 
$('span:even').addClass("even");

性能更好的答案：

$('span').filter(':odd').addClass("odd"); 
$('span').filter(':even').addClass("even");

編輯包括jQuery的文檔信息：http://api.jquery.com/odd-selector/

因爲：奇是一個jQuery延伸和不是p CSS規範的藝術，使用odd的查詢無法利用本機DOM querySelectorAll（）方法提供的性能提升。爲了在使用奇數選擇元素時達到最佳性能，首先使用純CSS選擇器選擇元素，然後使用.filter（「：odd」）。

編輯要回答編輯的問題：

var rowIdx = 0; 
var actualClass = "odd"; 
$('.col').each(function(){ 
    var $col = $(this); 
    var $span = $col.find("span").eq(rowIdx); 
    if ($span.length > 0) { 
    $span.addClass(actualClass); 
    actualClass = (actualClass == "odd" ? "even" : "odd"); 
    } 
});

來源

2013-06-30 13:21:37 Aguardientico

如何更好地表現性能？ – Tushar

已更新的答案，以解釋爲什麼第二個選項的性能更好。 – Aguardientico

如何直接在CSS中使用n-child。那會提供最好的表現嗎？ – Tushar

您也可以使用CSS的第n個孩子的財產，分配相同的類每個跨度和用偶奇執行操作

http://www.w3schools.com/cssref/sel_nth-child.asp

來源

2013-06-30 13:22:13

w3schools.com應禁止 – intuitivepixel

如果您需要更多控制權，您可以自行迭代跨度。

$(function() { 
    $.each($("div > span"), function(idx, span) { 
     if(idx % 2 == 0) 
      $(span).addClass("even"); 
     else 
      $(span).addClass("odd"); 
    }) 
})

編輯：現在它的測試

來源

2013-06-30 13:27:00 OzrenTkalcecKrznaric

分配ODD/EVEN類以跨度使用jquery/javascript

回答

相關問題