如何使用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>將是一種特定的顏色。當我點擊一個表格單元格時，我想向點擊的<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

假設（除非你當選爲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 2

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

Answer 3

$（「div.color」）上（'click'，function（）{

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

}）;