[jQuery] .parent() 與 .parents() 與 .closest() 的差異

用 w3 官網案例程式來看：連結

改成這樣就知道差異了

<div class="selected">
  123
  <div class="selected">
    <div>
      <p>Hello Again</p>
    </div>
  </div>
</div>

如果是 .parent()
$("p").parent(".selected").css("background", "yellow");
會發現 沒有變色

如果是 .closest()
$("p").closest(".selected").css("background", "yellow");
會發現 123 沒有變色 但 Hello Again 變色了

如果是 .parents()
$("p").parents(".selected").css("background", "yellow");
會發現 123 跟 Hello Again 都變色了

結論：
parent() 只往上查找一層
closest() 往上查找 只要找到符合條件的 就停止
parents() 往上查找 不停止 找出所有符合條件的