PJCHENder 未整理筆記

[Note] jQuery Tips

2017-12-06

[Note] jQuery Tips

@(JavaScript)[jQuery]

[TOC]

尋找父層元素

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

.parent( )

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

1
2
3
4
div
p Hello
div.selected
p Hello Again
1
2
3
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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

1
2
3
4
5
6
7
8
$('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 產生的變數名稱均以 $ 開頭:

1
2
3
4
5
// good
const $sidebar = $('.sidebar');

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

掃描二維條碼,分享此文章