1
2
3
4
5

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>鳳梨</li>
</ul>

1
2
3

$("li").click(function(){
  $(this).css("background-color","red");
}); 

1
2
3
4
5
6

<button type="button">按鈕</button>
<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>鳳梨</li>
</ul>

1
2
3
4
5
6
7
8
9

//抓取「第一個」蘋果
$("button").click(function(){
  $("li").first().css("background-color","red");
}); 

//抓取「最後一個」鳳梨
$("ul").click(function(){
  $("li").last().css("background-color","red");
});

1
2
3
4
5
6
7

<button type="button">按鈕</button>
<ul>
  <li class="apple">蘋果</li>
  <li class="banana">香蕉</li>
  <li class="pineapple">鳳梨</li>
  <li class="waxapple">蓮霧</li>
</ul>

 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
26
27
28
29

//抓取香蕉的「下一個」鳳梨
$("button").click(function(){
  $(".banana").next().css("background-color","red");
}); 

//抓取香蕉的「前一個」蘋果
$("button").click(function(){
  $(".banana").prev().css("background-color","red");
}); 

//抓取蘋果「之後的」全部
$("button").click(function(){
  $(".apple").nextAll().css("background-color","red");
}); 

//抓取鳳梨「之前的」全部
$("button").click(function(){
  $(".pineapple").prevAll().css("background-color","red");
}); 

//抓取從蓮霧到蘋果「之間的」全部
$("button").click(function(){
  $(".waxapple").prevUntil(".apple").css("background-color","red");
}); 

//抓取從香蕉到蓮霧「之間的」全部
$("button").click(function(){
  $(".banana").nextUntil(".waxapple").css("background-color","red");
}); 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<button type="button">按鈕</button>
<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>鳳梨</li>
</ul>
<ul>
  <li>蓮霧</li>
  <li>榴槤</li>
  <li>酪梨</li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//抓取蘋果
$("button").click(function(){
  let apple = $("ul li").first().text();
  console.log(firstLi); //蘋果
});

//抓取香蕉
$("button").click(function(){
  let banana = $("ul").eq(0).find("li").eq(1).text();
  console.log(banana); // 香蕉
});

//抓取蓮霧
$("button").click(function(){
  let waxApple = $("ul").eq(1).find("li").first().text(); 
  console.log(waxApple); //蓮霧
});

//抓取酪梨
$("button").click(function(){
  let avocado = $("ul").eq(1).find("li").last().text(); 
  console.log(avocado); //酪梨
});