jQuery 子層遍歷：children() 與 find() 的差別

選取子層元素的方法，屬於 物件樹遍歷 的一環。兩者的差別只在於 往下找幾層 。

children()

取得當前元素的子層元素（僅向下找一層），可用選取器進行篩選。

範例

HTML

<ul id="List" class="list">
  <li>List Item 1</li>
  <li>List Item 2
    <ul>
      <li>Sub List Item 1</li>
      <li>Sub List Item 2</li>
      <li>Sub List Item 3</li>
      <li>Sub List Item 4</li>
      <li>Sub List Item 5</li>
    </ul>
  </li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

JavaScript

$('#List').children().css('background-color', 'pink');

CSS

.list ul li {
  background-color: yellowgreen;
}

小提醒

僅會選取到子代第一層的 <li> 進行行內樣式的套用，第二層 <li> 維持不變！

find()

取得當前元素所指定的全部後代元素，利用選取器進行篩選。與 children() 不同的是，它會走訪整棵子樹，因此第二層的 <li> 也會被選到。

find(selector);

參數

選取器是 必填 的，find() 必須知道要找什麼。

功能	說明	型別	範例	備註
selector	指定元素	String	'li'、'.item'	必填

範例

HTML

<ul id="List" class="list">
  <li>List Item 1</li>
  <li>List Item 2
    <ul>
      <li>Sub List Item 1</li>
      <li>Sub List Item 2</li>
      <li>Sub List Item 3</li>
      <li>Sub List Item 4</li>
      <li>Sub List Item 5</li>
    </ul>
  </li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

JavaScript

$('#List').find('li').css('background-color', 'pink');

CSS

.list ul li {
  background-color: yellowgreen;
}

能用 children 就別用 find

children() 只掃一層，範圍小、速度快；find() 要走訪整棵子樹，結構愈深愈花時間。

常見問題

children 和 find 差在哪？

children() 只往下找一層的直屬子元素，find() 則會找遍所有後代層級。範例中的巢狀 清單 最能看出差別：前者只選到外層項目，後者連內層項目也一併選到。

find 的選取器參數是必填嗎？

是的。find() 必須告訴它要找什麼，沒有參數就不知道該篩選哪些後代；children() 則可以不給參數，直接取得所有直屬子元素。

兩者的效能有差嗎？

children() 只掃一層，範圍小、速度快；find() 要走訪整棵子樹，結構愈深愈花時間。能用 children() 解決時就不必動用 find()。

為什麼範例裡第二層的項目沒有變色？

因為 children() 只選到第一層的直屬子元素，第二層的項目不在集合裡，所以維持 CSS 檔中原本設定的樣式。

可以用選取器直接寫出後代關係嗎？

可以，後代選取器 就能達到同樣效果。但當起點是事件觸發的元素或某個變數時，就得靠遍歷方法從當下的元素往下找。

延伸閱讀

父層過濾方法物件樹遍歷CSS 後代選取器

參考資料：jQuery API：Traversing