0%

jQuery 筆記 - $(this), parent(), siblings(), find() 用法

friends

這一段筆記會用這個選單程式碼。

HTML

1
2
3
4
5
6
7
8
<ul class="menu">
<li>選單1</li>
<li>選單2</li>
<li>選單3</li>
<li>選單4</li>
<li>選單5</li>
<li>選單6</li>
</ul>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.menu {
width: 500px;
margin: 0 auto;
margin-top: 10px;
li {
border: 1px solid gray;
padding: 5px;
margin-bottom: 10px;
&:hover {
background-color: yellow;
cursor: pointer;
}
&.active {
background-color: yellow;
cursor: pointer;
}
}
}

this 選到自身元素

jQuery 中已經把 this 包裝好變成指向本身元素的寫法,變得相當方便,但在原生寫法就要看狀況而定了。

首先可以看到 SCSS 有加上一段是預備讓 JS 動態新增 .active 的片段程式碼。
要記錄的是如何透過 this 選取到自身元素,並且產生效果。可以這樣寫,

1
2
3
4
$(".menu li").click(function (e) {
e.preventDefault();
$(this).addClass("active");
});

當我點擊到 .menuli 時,在選到的自身元素動態加上 active,就會產生效果囉!

parent() 選到父元素

這個語法是 jQuery 包裝好的函式,也相當好用,當我點擊到元素本身後,會選到外層的父元素,並且控制它。

這邊的情境是,現在有一個選單,裡面有一個按鈕,當我點選按鈕後,會把該格的清單改變背景顏色,

HTML 架構

跟原本範本差不多,只是在 li 內加入了按鈕而已。

1
2
3
4
5
6
7
8
<ul class="menu">
<li><button class="btn">選單1</button></li>
<li><button class="btn">選單2</button></li>
<li><button class="btn">選單3</button></li>
<li><button class="btn">選單4</button></li>
<li><button class="btn">選單5</button></li>
<li><button class="btn">選單6</button></li>
</ul>

jQuery 寫法

點擊按鈕後,自身元素的父元素會產生 toggleClass 效果,動態切換 .active
parent() 語法要寫在 $(this) 的後面。

1
2
3
4
$(".btn").click(function (e) {
e.preventDefault();
$(this).parent().toggleClass("active");
});

siblings() 同層其他元素

這個語法就是選到同層元素,並指定該效果給它,這邊練習是滑鼠選到該元素後會改變背景顏色,而其他同層元素背景取消背景色。

一開始範例中的 li 就是同層元素。

jQuery 寫法

當我點擊 .menu 中的 li,會在自身元素增加 .active,並選到同層的 li 元素(siblings())同時取消賦予的 .active 效果。

1
2
3
4
$(".menu li").click(function (e) {
e.preventDefault();
$(this).addClass("active").siblings().removeClass("active");
});

find() 找到子層元素

前面提到父層元素,那當然也有子層元素,這次要選到 li 後,會改變當中的文字顏色,

HTML 架構

可以看到 HTML 結構中,在 li 內有 h3 標題。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="menu">
<li>
<h3>選單1</h3>
</li>
<li>
<h3>選單2</h3>
</li>
<li>
<h3>選單3</h3>
</li>
<li>
<h3>選單4</h3>
</li>
<li>
<h3>選單5</h3>
</li>
<li>
<h3>選單6</h3>
</li>
</ul>

SCSS 樣式

h3 加上預備要的樣式,並新增一個 .active 預備動態新增效果時讓 h3 的文字改變顏色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.menu {
width: 500px;
margin: 0 auto;
margin-top: 10px;
li {
border: 1px solid gray;
padding: 5px;
margin-bottom: 10px;
&:hover {
background-color: #eeeeee;
cursor: pointer;
}
h3 {
display: inline-block;
&.active {
color: red;
cursor: pointer;
}
}
}
}

jQuery 寫法

當我點擊到 li 時,會選到 li 自身元素,再找到裡面的子層元素 h3,並且在 .active 做切換。

1
2
3
4
$(".menu li").click(function (e) {
e.preventDefault();
$(this).find("h3").toggleClass("active");
});