jquery - 如何使用 jQuery 选择每个兄弟姐妹的子标签？

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>

任何<td>给定行中的每一行都将是某种颜色。当我单击表格单元格时，我想为 clicked 添加黑色边框<td>，并从已单击的行（但不是其他行）中可能已经具有黑色边框的任何单元格中删除黑色边框。我怎样才能做到这一点？

jQuery（不起作用）：

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

Answer 1

$(this).closest('tr').find('td').removeClass('black_border');

Answer 2

鉴于（除非您已选择stopPropagation()或return false在您的点击处理程序中）点击将冒泡到td元素，只需td在您的 jQuery 中定位：

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

或者，有点不同：

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

而且，鉴于您$(this)不止一次使用，值得缓存它，而不是每次都重新创建 jQuery 对象：

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

Answer 3

$("div.color").on('click',function() {

var $td= $(this).parent();
$td.siblings('.black_border').removeClass('black_border');
$td.addClass('black_border');

});