使用jQuery選擇父母后的div

Question

<div class="col-1-3"> 
    <div class="click"></div> 
</div> 
<div class="col-1-3"> 
</div> 
<div class="col-1-2"> 
</div> 

使用jQuery，我需要在用戶點擊「click」div時選擇col-1-2 div。我需要用col-1-3替換col-1-2。到目前爲止，我已經嘗試了使用parent（），next（），find（）的各種方法;等等。現在，我正在尋找：

$(".click").parent().next(".col-1-2").removeClass("col-1-2").addClass("col-1-3"); 

這顯然不起作用，但我不知道從哪裏去。

Answer 1

next只會查看下一個元素。您需要使用nextAll來測試以下所有兄弟姐妹。

使用this而不是選擇器將確保您處理的是實際點擊的div而不是另一個具有相同類名的div。

$(this).parent().nextAll(".col-1-2").removeClass("col-1-2").addClass("col-1-3"); 

你也不妨來過濾結果的變化僅適用於the first match。

Answer 2

還有一個稍短版本：

$(this).parent().siblings(".col-1-2").toggleClass("col-1-2 col-1-3"); 

$.fn.toggleClass可以用來代替或removeClass + addClass組合：col-1-2將被刪除，col-1-3將被添加。