javascript - 最初の 5 行と最後の 5 行にクラスを適用する

Question

私が達成したいことの簡単な例を作成しました。 http://jsfiddle.net/helpinspireme/ejHFf/ やりたいことは

テーブルの数を数える<tr>
テーブルの数が 6 未満の場合、すべてがクラスを取得しますred
5 より多く 11 より少ない場合、最初の 5 はクラスredを取得し、残りはblack
10 を超える場合redは、最初の 5 にクラスを追加し、次に最後の 5 にクラスblackを追加します。最初の 5 行と最後の 5 行の間の行は、クラスを取得しません。

どんな助けでも大歓迎です。

score 1 · Accepted Answer

あなたはすでに何をしましたか？あなたはアルゴリズム全体をほとんど説明しています。sliceインデックス間の要素をlength取得し、アイテムの数を取得するために使用するだけです。クラスを追加するには、を使用しますaddClass。

score 1 · Accepted Answer

あなたがしたい

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

score 0 · Accepted Answer

古いブラウザーのサポートなどの理由でこれが必要になる可能性があるため、これはあなたの質問に対する正確な回答ではありません (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;
}

score 0 · Accepted Answer

次のようなことを試してください：

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

ここにjsFiddleがあります

score 0 · Accepted Answer

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

例。

score 0 · Accepted Answer

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

javascript - 最初の 5 行と最後の 5 行にクラスを適用する

6 に答える 6

Related

Reference