Question

我正在尝试突出显示行中的表格单元格。

var $tr = $('tr:eq(' + row + ')');
$($tr:nth-child(col)).addClass('highlight');

Answer 1

var $tr = $('tr:eq(' + row + ')');
$tr.find(':nth-child(' + col + ')').addClass('highlight');

使用.find()。请参阅demo。

或者，如果您不需要$tr的引用，则可以通过一个选择器完成所有操作：

$('tr:eq(' + row + ') :nth-child(' + col + ')').addClass('highlight');

（Demo）

关于你的问题

如何在选择器中使用jQuery变量

（所有）jQuery遍历/选择器方法的结果是jQuery类型。这使得可以进行高级链接。此外，在这种类型上定义了jQuery方法。这意味着您需要对生成的对象执行 on 过滤等。因此，以下内容无效（:不是JavaScript运算符，nth-child()（可能）未定义为JavaScript函数）：

$($tr:nth-child(1)).addClass('highlight');

但可以改写为：

$tr.find(':nth-child(1)').addClass('highlight');

我们在分配给:nth-child(1)的{{1}}对象上应用了选择器jQuery。该对象可以保存对任意数量的DOM元素的引用，甚至是零！

Answer 2

我猜这样的事情？

<html>
<head>
<style>
.highlight{
    color:red;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
    var row = 1;
    var col = 2;
    $("tr:nth-child(" + row + ") > td:nth-child(" + col + ")").addClass('highlight');

});
</script>
</head>
<body>
<table>
    <tr>
        <td id="1">hello</td>
        <td id="1">hello2</td>
    </tr>
    <tr>
        <td id="2">world</td>
        <td id="2">world2</td>
    </tr>
</table>

</body>
</html>

Answer 3

你必须逃避第一组双引号 - 留下单引号引用那里。

var row = "billy";  
var $tr = $("tr:eq('" + row + "')");
$($tr:nth-child(col)).addClass('highlight');

如何在选择器中使用jQuery变量

3 个答案: