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

  • 第三种解决方案：（速度快，但比建议的解决方案更详细）$($('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/

只是指出显而易见的：如果OP想要做的就是将突出显示类添加到所有tr，那么 $("tr").addClass('highlight') 会起作用:-)

于 2012-11-30T21:49:02.460 回答