2

jQueryを使用してテーブル内の行を強調表示しようとしていますが、強調表示する行に変数を使用できるかどうか疑問に思っています。これは私が今持っているコードで、機能していません。

  var rowNumber = 3 //I want to use a loop, but for testing purposes I have it set to 3
  $('tr:eq(rowNumber)').addClass('highlight');
4

3 に答える 3

3

もちろん。:eq()セレクターに変数を渡すことができます。

$("tr:eq(" + rowNumber + ")").addClass("highlight");

またはeq()代わりにメソッドを使用します。

$("tr").eq(rowNumber).addClass("highlight");
于 2012-11-30T21:32:24.850 に答える
3 
$('tr').eq(rowNumber).addClass('highlight');

あなたのために働くはずです。

于 2012-11-30T21:32:47.807 に答える
1

まず、分離されたアクセスについて説明します（つまり、ループの最適化を考慮していません）

  • 最善の解決策：.eq（）を使用する（高速、適切、短い）

あなたは次のようなことを試すことができます

$('tr').eq(rowNumber).addClass('highlight');

説明：.eq（index）一致した要素のセットを、指定されたインデックスの要素に減らします。

ソース：http ：//api.jquery.com/eq/

  • 別の解決策：「：eq（index）」セレクターを使用します（不必要に遅く、冗長で複雑です）

    $（ "tr：eq（" + rowNumber + "）"）。addClass（'highlight'）;

  • 3番目の解決策:(高速ですが、提案された解決策よりも冗長です）$（$（'tr'）。get（rowNumber））。addClass（'highlight'）;

これがどのように機能するか：$（'tr'）。get（rowNumber）は、クエリセレクターに一致する（rowNumber + 1）番目のDOM要素を取得し、周囲の$（）を使用してjQueryの良さにラップされます。

詳細については、http：//api.jquery.com/get/をご覧ください。

付属のjsFiddleを自由に試してみてください：http： //jsfiddle.net/FuLJE/

特にパフォーマンスを重視していて、実際に配列を反復処理する場合は、代わりにこれを行うことができます。

var trs = $('tr').get();  //get without arguments return the entire array of matched DOM elements
var rowNumber, len = trs.length; 
for(rowNumber = 0; rowNumber < len; rowNumber++) {
   var $tr = $(trs[rowNumber]);
   //various stuff here
   $tr.addClass('highlight');
   //more stuff here
}

もちろん、.each（）を使用することもできます

$("tr").each(function (rowNumber, tr) {
   var $tr = $(tr);
   //various stuff here
   $tr.addClass('highlight');
   //more stuff here
})

ドキュメントはここにあります：http：//api.jquery.com/each/

明らかなことを指摘するだけです。$（ "tr"）。addClass（'highlight'）は、すべてのtrにハイライトクラスを追加するだけでOPが実行したい場合に機能します:-)

于 2012-11-30T21:49:02.460 に答える