Более эффективный способ стилизации чередующихся блоков строк таблицы с помощью jQuery? - PullRequest
Новая
       17

Более эффективный способ стилизации чередующихся блоков строк таблицы с помощью jQuery?

0 голосов
/ 05 февраля 2009

Создание нечетных / четных стилей с помощью jQuery довольно просто: 

$(function() {
  $(".oddeven tbody tr:odd").addClass("odd");
  $(".oddeven tbody tr:even").addClass("even");
});

Теперь я столкнулся с интересной проблемой сегодня. Что если вы хотите стилизовать чередующиеся группы элементов? Например, чередующиеся блоки из 3-х. Это можно сделать следующим образом: 

$(function() {
  $(".oddeven3 tbody tr:nth-child(3n+1)").addClass("odd");
  $(".oddeven3 tbody tr:nth-child(3n+2)").addClass("odd");
  $(".oddeven3 tbody tr:nth-child(3n+3)").addClass("odd");
  $(".oddeven3 tbody tr:nth-child(3n+4)").addClass("even");
  $(".oddeven3 tbody tr:nth-child(3n+5)").addClass("even");
  $(".oddeven3 tbody tr:nth-child(3n+6)").addClass("even");
});

Кажется, немного длинным, хотя. Теперь это можно несколько упростить и сделать общим: 

function oddEvenGroupStyle(groupSize) {
  for (var i=1; i<=groupSize; i++) {
    $(".oddeven" + groupSize + " tbody tr:nth-child(" + groupSize + "n+" + i + ")").addClass("odd");
    $(".oddeven" + groupSize + " tbody tr:nth-child(" + groupSize + "n+" + (groupSize+i) " + ")").addClass("even");
  }
}

и 

$(function() {
  oddEvenGroupStyle(3);
});

Похоже, что-то вроде хака для меня. Есть ли еще какой-нибудь способ выбора правильных строк в jQuery?

Ответы [ 4 ]

3 голосов
/ 05 февраля 2009 
function oddEvenGroupStyle(groupSize) {
    var even = false;
    $('tr').each( 
        function(i){ 
            if(!(i % groupSize)) even = !even;
            $(this).attr('class', (even ? 'groupEven':'groupOdd') ); 
    })
}
2 голосов
/ 05 февраля 2009

Клетус, если вы хотите, чтобы работа была выполнена 101% jQuery-ish рассмотрите:

  1. с использованием each вместо классического для цикла
  2. расширение поведения селектора jQuery ? (просто подсказка)
0 голосов
/ 05 февраля 2009

1) зачем иметь нечетный AND и четный класс, если у вас есть стиль по умолчанию, а затем есть переопределенный нечетный, он, вероятно, будет быстрее

2) вы не можете рендерить html с уже примененным стилем? скажите, если вы делаете это на PHP или ASP.net. делать это после факта медленнее, особенно если у вас много строк.

0 голосов
/ 05 февраля 2009

Я бы добавил класс к первому TR в группе: 

<tr class="group"><td>Group 1</td></tr>
<tr class="grouppart"><td>Part of group 1</td></tr>
<tr class="grouppart"><td>Part of group 1</td></tr>
<tr class="group"><td>Group 2</td></tr>
...

Таким образом, вы можете изменять размер групп без изменений в вашем javascript. 

// Format the groups:
$("tr.group:even").addClass("even");
$("tr.group:odd").addClass("odd");

// Then apply to groupparts:
$("tr.grouppart").each(function(){
    var oGroup = $(this).prevAll("tr.group:first");
    if(oGroup.hasClass("even")){$(this).addClass("even");}
    if(oGroup.hasClass("odd")){$(this).addClass("odd");}
});

Примечание: я написал это по памяти, поэтому там могут быть небольшие глюки. Пожалуйста, прокомментируйте, если это так, и я исправлю это.

...