Question

I have a Ci script outputting database values. On these values ‘#commentLink’ and ‘#commentBox’ are outputted in ever iteration of the Ci outputted data. How would I identify which commentLink and commentBox is which. Right now if you click the first commentLink, it selects the first commentBox. and when you click the 20th commentLink it selects the first commentBox. I need the 20th commentLink to select the 20th commentBox.

So How would I iterate over the values? Is there a way to identify the outputted rows using a unique id and use .each() or something of the nature?

$("#commentLink").click(function() {
        $("#commentBox").focus();
});

Answer 1

rather than using the selector by id, you could use traversal to get the node in which you’re interested. For example, if each is in a table row:

<tr>
    <td><input id="commentBox" type="text>SomeText</input></td>
    <td><input id="anotherBox" type="text>SomeText</input></td>
    <td><a id="commentLink">Click me!</a></td>
</tr>

you could say $(this).parent.sibling('#commentBox') in the function body to get the one #commentbox in the same row.

See the examples section of jQuery click documentation for a how the $(this) is used.

Also, as a minor side issue, it’s considered good practice to keep ids unique on the page and use a class for something like this (commentBox).