本篇重點
- 尋找父元素的常用方法：
.parent() 、.parents() 、.closest() - 尋找同層元素的常用方法：
.siblings() 、.next() 、.prev() - 尋找子元素的常用方法：
.children() 、.find() - 每個尋找元素方法的具體用途和應用場景
尋找父元素
.parent()
只尋找當前元素上一層匹配的元素，也就是尋找親身父母
範例
html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="box">
<div class="content">
<h2>.parent() 的效果</h2>
<h3>使用方式一</h3>
<ul>
<li class="target-1 target-2">取得所有 li 元素的直接父元素</li>
<li>設定父元素的文字顏色</li>
</ul>
<h3>使用方式二</h3>
<ul class='selected'>
<li class="target-1 target-2">取得所有 li 元素的直接父元素，並且父元素的 class 有 "selected"</li>
<li>設定父元素的文字顏色</li>
<li class="selected">沒有 "selected" 的元素不會被設定</li>
</ul>
</div>
<div class="field is-grouped">
<button class="button is-link example-1">使用方式一</button>
<button class="button is-info example-2">使用方式二</button>
<button class="button reset">reset</button>
</div>
</div>
|
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$('.example-1').on('click', function() {
$('.target-1').parent().css('color', 'DodgerBlue');
});
$('.example-2').on('click', function() {
$('.target-2').parent('.selected').css('color', 'LightSkyBlue');
});
$('.reset').on('click', function() {
$('*').css('color', '');
});
|
.parents()
向上尋找所有匹配的祖先元素，直到根元素為止
範例
html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="box">
<div class="content selected">
<h2>.parents() 的效果</h2>
<h3>使用方式一</h3>
<ul>
<li>取得所有 li 元素的所有匹配的祖先元素，直到根元素</li>
<li class="target-1">設定所有祖先元素的背景顏色</li>
</ul>
<h3>使用方式二</h3>
<ul class="selected">
<li>取得所有 li 元素的祖先元素，並且元素的 class 有 "selected" </li>
<li>設定匹配的祖先元素背景顏色</li>
<li class="target-1 target-2">只設定匹配的元素，因此使用方法一的ul不會被設定背景顏色</li>
</ul>
</div>
<div class="field is-grouped">
<button class="button is-link example-1">使用方式一</button>
<button class="button is-info example-2">使用方式二</button>
<button class="button reset">reset</button>
</div>
</div>
|
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$('.example-1').on('click', function() {
$('.target-1').parents().css('background-color', 'DodgerBlue');
});
$('.example-2').on('click', function() {
$('.target-2').parents('.selected').css('background-color', 'LightSkyBlue');
});
$('.reset').on('click', function() {
$('*').css('background-color', '');
});
|
.closest()
- 向上尋找所有祖先元素，直到第一個匹配的元素停止
.closest() 方法必須代入參數 (選擇器)
範例
html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div class="box">
<div class="content selected">
<h2>.closest() 的效果</h2>
<h3>使用方式</h3>
<ul class="selected">
<li>取得所有 li 元素向上尋找祖先元素，直到第一個 class 有 "selected" 的元素停止</li>
<li class="target-1">設定匹配元素的邊框</li>
<li>只設定第一個匹配的元素，因此上層的 div class 有 "selected"，但沒有被設定邊框</li>
</ul>
</div>
<div class="field is-grouped">
<button class="button is-link example-1">使用方式</button>
<button class="button reset">reset</button>
</div>
</div>
|
js1
2
3
4
5
6
7
8
9
|
$('.example-1').on('click', function() {
$('.target-1').closest('.selected').css('border', '1px solid red');
});
$('.reset').on('click', function() {
$('*').css('border', '');
});
|
尋找同層元素
.siblings()
尋找當前元素的所有同層元素 (排除自己)，也就是元素的兄弟姐妹
範例
html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <div class="box">
<div class="content selected">
<h2 class="selected">.siblings() 的效果</h2>
<h3>使用方式一</h3>
<ul class="target-1 selected">
<li>取得 class 有 "target-1" 的元素再匹配所有同層元素</li>
<li>設定所有同層元素的文字顏色</li>
<li>設定除了自己的同層元素</li>
</ul>
<h3 class="target-2">使用方式二</h3>
<ul class="selected">
<li>取得 class 有 "target-2" 的元素再匹配所有同層 class 有 "selected" 元素</li>
<li>設定所有匹配同層元素的文字顏色</li>
<li>設定除了自己的同層元素</li>
</ul>
</div>
<div class="field is-grouped">
<button class="button is-link example-1">使用方式一</button>
<button class="button is-info example-2">使用方式二</button>
<button class="button reset">reset</button>
</div>
</div>
|
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$('.example-1').on('click', function() {
$('.target-1').siblings().css('color', 'DodgerBlue');
});
$('.example-2').on('click', function() {
$('.target-2').siblings('.selected').css('color', 'LightSkyBlue');
});
$('.reset').on('click', function() {
$('ul').siblings().css('color', '');
});
|
.next()
尋找當前元素同層的下一個元素，也就是元素最大的弟弟或妹妹
範例
html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="box">
<div class="content selected">
<h2>.next() 的效果</h2>
<h3 class="target-1">使用方式一</h3>
<ul>
<li>取得 class 有 "target-1" 的元素再匹配同層的下一個元素</li>
<li>設定同層的下一個元素的文字顏色</li>
</ul>
<h3 class="target-2">使用方式二</h3>
<ul class="selected">
<li>取得 class 有 "target-2" 的元素再匹配同層下一個 class 有 "selected" 的元素</li>
<li>設定同層下一個匹配元素的文字顏色</li>
<li>如果同層下一個元素 class 沒有 "selected" 就無法設定文字顏色</li>
</ul>
</div>
<div class="field is-grouped">
<button class="button is-link example-1">使用方式一</button>
<button class="button is-info example-2">使用方式二</button>
<button class="button reset">reset</button>
</div>
</div>
|
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$('.example-1').on('click', function() {
$('.target-1').next().css('color', 'DodgerBlue');
});
$('.example-2').on('click', function() {
$('.target-2').next('.selected').css('color', 'LightSkyBlue');
});
$('.reset').on('click', function() {
$('*').css('color', '');
});
|
.prev()
尋找當前元素同層的上一個元素，也就是元素最小的哥哥或姐姐
範例
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="box">
<div class="content selected">
<h2>.prev() 的效果</h2>
<h3 class="target-1">使用方式一</h3>
<ul>
<li>取得 class 有 "target-1" 的元素再匹配同層的上一個元素</li>
<li>設定同層的上一個元素的文字顏色</li>
</ul>
<h3 class="selected">使用方式二</h3>
<ul class="target-2">
<li>取得 class 有 "target-2" 的元素再匹配同層上一個 class 有 "selected" 的元素</li>
<li>設定同層上一個匹配元素的文字顏色</li>
<li>如果同層上一個元素 class 沒有 "selected" 就無法設定文字顏色</li>
</ul>
</div>
<div class="field is-grouped">
<button class="button is-link example-1">使用方式一</button>
<button class="button is-info example-2">使用方式二</button>
<button class="button reset">reset</button>
</div>
</div>
|
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$('.example-1').on('click', function() {
$('.target-1').prev().css('color', 'DodgerBlue');
});
$('.example-2').on('click', function() {
$('.target-2').prev('.selected').css('color', 'LightSkyBlue');
});
$('.reset').on('click', function() {
$('*').css('color', '');
});
|
這段代碼會將類別為 .current 的元素的上一個同層元素字體加粗。
尋找子元素
.children()
只尋找當前元素下一層匹配的元素，也就是尋找元素的親生小孩
範例
html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="box">
<div class="content">
<h2>.children() 的效果</h2>
<h3>使用方式一</h3>
<ul class="target-1">
<li>取得 class 有 "target-1" 的元素再匹配所有下一層的元素</li>
<li>設定所有下一層元素的文字顏色</li>
</ul>
<h3>使用方式二</h3>
<ul class="target-2">
<li>取得 class 有 "target-2" 的元素再匹配所有下一層 class 有 "selected" 的元素</li>
<li class="selected">設定所有下一層元素的文字顏色</li>
<li class="selected">沒有 "selected" 的元素不會被設定</li>
</ul>
</div>
<div class="field is-grouped">
<button class="button is-link example-1">使用方式一</button>
<button class="button is-info example-2">使用方式二</button>
<button class="button reset">reset</button>
</div>
</div>
|
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$('.example-1').on('click', function() {
$('.target-1').children().css('color', 'DodgerBlue');
});
$('.example-2').on('click', function() {
$('.target-2').children('.selected').css('color', 'LightSkyBlue');
});
$('.reset').on('click', function() {
$('*').css('color', '');
});
|
.find()
- 向下尋找所有匹配的後代元素
.find() 方法必須代入參數 (選擇器)
範例
html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div class="box">
<div class="content target-1">
<h2 class="selected">.find() 的效果</h2>
<h3>使用方式</h3>
<ul>
<li class="selected">取得 class 有 "target-1" 的元素再向下匹配所有 class 有 "selected" 的元素</li>
<li class="selected">設定匹配元素的文字顏色</li>
<li>如果元素的 class 沒有 "selected" 就無法設定文字顏色</li>
</ul>
</div>
<div class="field is-grouped">
<button class="button is-link example-1">使用方式</button>
<button class="button reset">reset</button>
</div>
</div>
|
js1
2
3
4
5
6
7
8
9
|
$('.example-1').on('click', function() {
$('.target-1').find('.selected').css('color', 'DodgerBlue');
});
$('.reset').on('click', function() {
$('*').css('color', '');
});
|
結論
jQuery 提供了強大的工具，能快速尋找父元素、同層元素與子元素，讓操作 DOM 結構更加靈活且高效。
尋找父元素
.parent()：尋找最近的父元素.parents()：尋找所有祖先元素.closest()：尋找最近且符合條件的祖先元素
尋找同層元素
.siblings()：尋找所有同層元素（不包括自身）.next()：尋找下一個同層元素.prev()：尋找上一個同層元素
尋找子元素
.children()：尋找所有直接子元素.find()：尋找所有符合條件的子元素
除了這些常用方法外，還有一些進階方法，如 .parentsUntil() 和 .offsetParent() 等，可以根據需求選擇最適合的方法～
延伸閱讀
【天矽科技】DOM 是什麼?
【jQuery 官方文件】tree-traversal 介紹
