jQuery DOM Traversal - 子層

選取子層元素的方法。

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()

取得當前元素所指定的全部子層元素。利用選取器進行篩選。

find(selector)

參數

功能	說明	型別	範例	備註
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;
}