<div class="selected"> 123 <div class="selected"> <div> Hello Again </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() 往上查找 不停止 找出所有符合條件的
用 w3 官網案例程式來看：連結改成這樣就知道差異了 123 Hello Again 如果是 .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() 往上查找 不停止 找出所有符合條件的
內容出處: 謝晒的PHP網頁設計: [jQuery] .parent() 與 .parents() 與 .closest() 的差異