jqueryのホバーの範囲

Question

私はここに新しいです、私が欲しいものに似たような答えは見つかりません。私は進歩を遂げ、さらに進むことはできません。以下は私のスナップされた、それは私が2番目と最後のTRの間にマウスをかざすと色が変わります。 （最初のTRはタイトルであり、最後のTRはフッタです）。ホバリング可能な範囲の間に、それを選択するには2番目のTDと2番目の最後のTDだけを含めることができます。

$('table#tblSchoolList tr:gt(0)').hover(function(){ 
    ////and not the last child (.next length = 0 means last) 
    if ($(this).next().length != 0){ 
     $(this).css("background", "red"); 
    } 
}, function(){ 
    $(this).css("background", ""); 
}) 

要するに、テーブルホバーは最初と最後のTRとTDを除外します。

TIA。

Answer 1

：ここ

$('#foo tr').slice(1,-1).hover(function(){ 
    $(this).find('td').slice(1,-1).toggleClass('highlight'); 
}); 

は非常に簡単な例です

.find()を次のセレクタとともに使用して、それぞれtdをそれぞれtrにすることができます。

$('table#tblSchoolList tr:gt(0)').hover(function() { 
    if ($(this).next().length != 0) { 
     $(this).find('td:not(:first-child, :last-child)').css("background", "red"); 
    } 
}, function() { 
    $(this).find('td:not(:first-child, :last-child)').css("background", ""); 
}); 

マウスが最初と最後のtdの上にある場合でもこの関数はトリガーされますが、色付けされません。

jsFiddle demo

また、if文のための必要性を取り除く、あなたのtr秒でセレクタを使用することができます。少しグッディとして

---

$('table#tblSchoolList tr:not(:first-child, :last-child)').hover(function() { 
    $(this).find('td:not(:first-child, :last-child)').css("background", "red"); 
}, function() { 
    $(this).find('td:not(:first-child, :last-child)').css("background", ""); 
}); 

が、私は変換することができました気づきましたすべてのjQueryコードを CSSルール（最新のブラウザでのみ動作）：

table#tblSchoolList tr ~ tr:not(:last-child):hover td ~ td:not(:last-child) { 
    background: red; 
} 

もちろん、あなたは常にあなたが古いブラウザとの互換性を必要以上にCSSが何を意味するのかを把握することはできません:)

jsFiddle demo

Answer 2

あなたはこのように、sliceを使用してみてください：負の数を使用して

$('table#tblSchoolList tr').slice(1,-1).hover(function(){ 
    $(this).css("background", "red"); 
}, function(){ 
    $(this).css("background", ""); 
}); 

は、リストの末尾からのオフセットを指定します。だから、：

slice(
    1, // omit first row 
    -1 // omit last row 
) 

以上単に：

$('table#tblSchoolList tr').slice(1,-1).hover(function(){ 
    $(this).toggleClass('highlight'); 
}); 

（あなたは色の動作を処理するためにhighlightクラスを持っていると仮定した場合）。

---

編集：は、その最初と最後の列だけでなく、行を確保するために更新、強調表示されません（感謝の@boltclock）： http://jsfiddle.net/redler/Mgd8f/