Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

[Frontend]筆記-使用Selector尋找父元素的方式(parent)幾種相關做法

內容目錄

筆記-使用Selector尋找父元素的方式(parent)幾種相關做法

最近有個小需求得回去寫了點jquery,因為很久沒寫,也意外的發現以前沒使用過的一個api。

通常要透過selector找特定父元素時都會使用.parent('element')吧,但.parent('element')只會往前一層,如果想要繼續往前找,可以使用.parents('element')
.parents('element')會有個特性,會不斷的往前找,把所有符合條件的元素都撈出來。
如果只想要往前撈到一個特定父元素的話,可以使用closest(),這樣就只會往前找但符合條件就會停止。

範例

<div class="parnet selected">
  Hello Parent
  <div class="child selected">
    <div>
      <p>Hello </p>
    </div>
  </div>
</div>

以上述解釋的話會有以下狀況

$('p').parent('selected');//找到<div class="child selected">
$('p').parents('selected');//找到<div class="child selected">與<div class="parnet selected">
$('p').closest('selected');//找到<div class="child selected">

小結

  • parent() 只往上找一層
  • closest() 往上找,找到符合條件的就會停止
  • parents() 一直往上找,找出所有符合條件的(會丟回陣列)