I'm trying to highlight the table cell that is in row, col.
var $tr = $('tr:eq(' + row + ')');
$($tr:nth-child(col)).addClass('highlight');
3 Answers
var $tr = $('tr:eq(' + row + ')');
$tr.find(':nth-child(' + col + ')').addClass('highlight');
Alternatively, if you don't need a reference to the $tr, you can do it all via one selector:
$('tr:eq(' + row + ') :nth-child(' + col + ')').addClass('highlight');
(Demo)
As for your question
How to use a jQuery variable in a selector
The result of (all) jQuery traversal / selector methods is of type jQuery. This makes it possible to do advanced chaining. Also, it is on this type that the jQuery methods is defined. This means that you need to perform filtering etc. on the resulting object. Thus, the following is invalid (: is not a JavaScript operator, nth-child() is (probably) not defined as a JavaScript function):
$($tr:nth-child(1)).addClass('highlight');
But can be rewritten as:
$tr.find(':nth-child(1)').addClass('highlight');
Here we're applying the selector :nth-child(1) on the jQuery object assigned to $tr. This object can hold a reference to any number of DOM elements, even zero!
2 Comments
melaos
nice, forgot about using jsfiddle :)
Phillip Senn
jensgram, this was a very complete and well thought out answer. Thank you very much.
i'm guessing something like this?
<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>
1 Comment
melaos
this page, jsfiddle.net, useful for trying out codes and even more awesome when attached to so threads so other people can try and modify the code :)
You have to escape the first set of double quotes -- leave the single quotes there.
var row = "billy";
var $tr = $("tr:eq('" + row + "')");
$($tr:nth-child(col)).addClass('highlight');
Comments
rowandcolplease?