javascript - 将类应用于前 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

你已经做了什么？你几乎描述了整个算法。只需用于slice获取索引之间的元素并length获取项目数。要添加类，请使用addClass.

Answer 2

你要

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

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');
        }
    });
}

例子。