Details on jQuery selectors path

Question

I have a table with cells which share the same id="spot". I would like to change all these cells.

<table>
    <tr>
        <td id="spot">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td id="spot">3</td>
        <td>4</td>
    </tr>
</table>
// 1 2
// 3 4

Please tell me the difference between $("td#spot") and $("#spot") as the following lines of code don't produce the same result.

$("#spot").each(function (item) {
    $(this).text("0");
})
// 0 2
// 3 4

$("td#spot").each(function (item) {
    $(this).text("0");
})
// 0 2
// 0 4

You can't use the same id. But you can you the same classes. If you will use classes there is no difference between .spot and td.spot. — user3127896, May 25 '14 at 10:56

score 0 · Answer 1 · edited May 25 '14 at 11:09

You can't have duplicate ids. So, change id to class.

And then do:

$('.spot') //to select element anywhere in document.

or

$('td.spot'); //to select a td with "spot" class.

or

$('tr > .spot'); //to select a immediate child of tr having class "spot"

or

$('table .spot'); //to select a child at any depth  having class "spot"

In the first, you are just being liberal, while in the second you are being more specific.

Also, $(this).("0") doesn't make sense. I think you wanted $(this).text("0")

Details on jQuery selectors path

1 Answers1