jQuery: Pass variable to :eq() does not work

Question

I have been trying to find out why the following lines of code do not work:

$('#add-cloud > select').change(function() {
    var selected = parseInt($('#add-cloud select option:selected').val()); 
    $("#cloud-calculator table tr:eq(selected)").css("color", "red");
});

If I change :eq(selected) to :eq(4) for example - works fine. How do you pass variable as an argument to :eq() ?

Answer 1

You have to concatenate your variable with your selector:

$("tr:eq("+selected+")");

Answer 2

The way you're doing it, you're embedding the actual string "selected" in the selector. You need to construct a string using your selected variable as a part of it:

$("#cloud-calculator table tr:eq(" + selected + ")").css("color", "red");

Answer 3

Also, you can simply use the 'this' object to get the seleted value.

$('#add-cloud > select').change(function() 
{
    var rowSelector = '#cloud-calculator table tr:eq(' + parseInt(this.val()) + ')';
    $(rowSelector).css("color", "red");
}