在使用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-2替換為col-1-3。 到目前為止，我已經嘗試使用parent（）;、 next（）;、 find（）;的各種方法。 等。現在，我調查：

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

那顯然是行不通的，但是我不確定從這里去哪里。

Answer 1

next將僅查看緊鄰的next元素。 您需要使用nextAll來測試以下所有兄弟姐妹。

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

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

您可能還希望過濾結果以將更改僅應用於第一個匹配項 。

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將被添加。