[note] jQuery Tips

尋找父層元素

keywords: .parent([selector]), .parents([selector]), .parentsUntil([selector | element] [, filter])

.parent( )

利用 .parent([selector]) 可以找出某元素的向上一層的所有父層元素。舉例來說：

div
  p Hello
div.selected
  p Hello Again

// JS
$('p').parent(); //   會選到所有 p 的父層元素（div, div.selected）
$('p').parent('.selected'); //  只會選到 p 的父層且為 .selected 的元素（div.selected）

.parents( )

.parent() 和 .parents() 最大的差別在於 .parent() 只會向上找一層，而 .parents() 會一直向上找出所有的節點。

當 .parents([selector]) 中有帶入 selector 參數時，則只會回傳符合的那些元素。

.parentsUntil( )

當 .parentsUntil([selector | element] [, filter]) 沒有提供 selector 參數時，其顯示的結果會和 .parents() 一樣。

但是當 .parentsUntil() 帶入 selector 參數時，會回傳所有父層的元素，但不包含與該 selector 相符的元素。

範例

See the Pen [jQuery] parent, parents, parentsUntil by PJCHEN (@PJCHENder) on CodePen.

HTML

<ul class="level-1 yes">
  <li class="item-i">I</li>
  <li class="item-ii">
    II
    <ul class="level-2 yes">
      <li class="item-a">A</li>
      <li class="item-b">
        B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
<div>
  <p>Hello</p>
</div>
<div class="selected">
  <p>Hello Again</p>
</div>

JS

$('li.item-a').parent(); // ul.level-2.yes
$('ul.level-3').parent(); // li.item-b

$('ul.level-3').parents(); // [li.item-b, ul.level-2.yes, li.item-ii, ul.level-1.yes, body, html]
$('ul.level-3').parents('li.item-ii'); // li.item-ii

$('ul.level-3').parentsUntil('li.item-ii'); // [li.item-b, ul.level-2.yes]
$('ul.level-3').parentsUntil('li.item-ii', '.yes'); // [ul.level-2.yes]

AJAX

此部分參考 [AJAX(XMLHttpRequest)](/Users/pjchen/Projects/Note/source/_posts/WebAPIs/[WEB] XMLHttpRequest(AJAX).md)。

Code Style

對於使用 jQuery Selector 產生的變數名稱均以 $ 開頭：

// good
const $sidebar = $('.sidebar');

// good
const $sidebarBtn = $('.sidebar-btn');