Применение класса к первым 5 и последним 5 строкам

Question

Я создал простой пример того, чего я хочу достичь. http://jsfiddle.net/helpinspireme/ejHFf/ Что я хотел бы сделать, это

• Подсчитайте количество таблицы <tr>
• Если таблица имеет меньше чем 6, то все получают класс red
• Если более 5, но менее 11, то первый 5 получите класс red, а остальные black
• Если более 10, добавьте класс red в первые 5, а затем последние 5 добавить класс black в. Строки между первыми 5 и последними 5 не имеют класса.

Любая помощь будет оценена по достоинству. Спасибо.

Answer 1

Вы хотите

if (x < 6) { 
     $(tooltips_id).addClass('red'); 
    } else if (x > tooltips_amount-5) { 
     $(tooltips_id).addClass('black'); 
    } else { 
     // else 
    } 

Answer 2

Что вы уже сделали? Вы в значительной степени описываете весь алгоритм. Просто используйте slice, чтобы получить элементы между индексами и length, чтобы получить количество элементов. Чтобы добавить класс, используйте addClass.

Answer 3

Это не совсем ответ на вопрос, как вы можете нуждаться в этом по таким причинам, как поддержка старых браузеров (это особенно заметно, что IE поддерживает только мое решение в версии 9). Хотя это может быть полезно не использовать это решение по той же самой причине, я действительно думаю, что важно отметить, что по более поздним стандартам вы можете это сделать даже без использования Javascript. Вы только CSS:

tr 
{ 
    border: 1px solid #000; 
} 

tr:nth-child(-n+5) 
{ 
    border: 1px solid red; 
} 


tr:nth-last-child(-n+5) 
{ 
    border: 1px solid red; 
} 

Answer 4

попробовать что-то вроде этого:

$("tr:lt(5)").css({ backgroundColor : "blue" }); 
$("tr:gt(5)").css({ backgroundColor : "red" }); 

Вот jsFiddle

Answer 5

скрипку для этого http://jsfiddle.net/9fmNG/

var rows = $('table tr'); 

rows.map(function(index, row){ 
    var allRows = rows.size(); 

    if(index+1 <= 5) 
     $(row).addClass('red'); 
    else if((index+1) >= (allRows-5)){ 
     $(row).addClass('black');  
    }    
})​ 

Answer 6

var tooltip = function() { 
    var tooltips_tr = $('#primary_table tr'); 
    var tooltips_amount = $(tooltips_tr).length; 

    tooltips_tr.each(function(i){ 
     i+=1; 
     if(tooltips_amount < 6) $(this).addClass('red'); 
     if(tooltips_amount > 5 && tooltips_amount < 11) 
     { 
      if(i<=5) $(this).addClass('red');  
      else $(this).addClass('black'); 
     } 
     if(tooltips_amount > 10) 
     { 
      if(i<=5) $(this).addClass('red');  
      else if(i>tooltips_amount-5) $(this).addClass('black'); 
     } 
    }); 
} 

Example.