Question

HTML:

<tr>
    <td><div class="color">Stuff</div></td>
    <td><div class="color">Stuff</div></td>
    // etc.
</tr>
<tr>
    <td><div class="color">Stuff</div></td>
    <td><div class="color">Stuff</div></td>
    // etc.
</tr>

Every <td> of any given row will be a certain color. When I click on a table cell I want to add a black border to the clicked <td>, and remove the black border from any cells in the clicked row (but not in other rows) that may already have the black border. How can I do this?

jQuery (doesn’t work):

<script type="text/javascript">
$(document).ready(function() {
    $("div.color").click(function() {
        $(this).siblings().removeClass('black_border');
        $(this).addClass('black_border');
    });
});
</script>

Answer 1

Given that (unless you’ve elected to stopPropagation(), or return false in your click-handlers) the click will bubble up to the td element, just target the td in your jQuery:

$("td").click(function() {
    $(this).siblings().removeClass('black_border');
    $(this).addClass('black_border');
});

Or, a little differently:

$("td").click(function() {
    $(this).closest('tr').find('.black_border').removeClass('black_border');
    $(this).addClass('black_border');
});

And, given that you’re using $(this) more than once, it’s worth caching that, rather than recreating the jQuery object each time:

$("td").click(function() {
    var that = $(this);
    that.closest('tr').find('.black_border').removeClass('black_border');
    that.addClass('black_border');
});