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

【问题标题】：How can I use jQuery to select a child tag of every sibling?如何使用 jQuery 选择每个兄弟姐妹的子标签？
【发布时间】：2012-10-10 21:55:45
【问题描述】：

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> 都将是某种颜色。当我单击表格单元格时，我想为单击的<td> 添加黑色边框，并从单击的行（但不是其他行）中可能已经具有黑色边框的任何单元格中删除黑色边框。我该怎么做？

jQuery（不起作用）：

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

【问题讨论】：

div.color 没有任何兄弟姐妹。你需要做 $(this).parents('tr').find("div.color').removeClass('black_border');

标签： jquery children siblings

【解决方案1】：

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

$("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');
});

【讨论】：

谢谢！就是这样。感谢您的帮助。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

});

【讨论】：