一、序号的问题
1.1 eq()
举例：
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 // 点击div让它的第一个儿子变色
28 $(“div”).click(function() {
29 $(this).children().eq(0).css(“background-color”, “red”);
30 })
eq(): 选中元素大队列的排名，与亲兄弟的排名没有直接关系。
eq(): 选中元素不同， 序号也是不相同的。
1
2
3
4
5
6
7
8
9
10
我想变红
11
12
13
14
15 $(“p”).eq(6).css(“color”, “red”);
16 $("#box1 p").eq(2).css(“color”, “blue”);
17 $(".teshu").eq(3).css(“color”, “orange”);
18
1.2 index()
index(): 表示亲兄弟的排名，无视亲兄弟的类型。只要是同一个父节点就是亲兄弟。
DOM结构：
1
2
3
4
5
h3
6
7
8
输出亲兄弟的排名
9
10
执行代码：
1 // 点击teshu输出亲兄弟的排名
2 $("#teshu").click(function() {
3 console.log($(this).index());
4 })
index()的值非常稳定，无视选择器的选择 都是弹出2
DOM结构：
1
2
3
4
5
6
7
8
9
10
弹出亲兄弟的排名
11
12
执行代码：
1 // 弹出亲兄弟的排名
2 $(“p”).click(function() {
3 console.log($(this).index());
4 })
5
6
7 $("#box1 p").click(function() {
8 console.log($(this).index());
9 })
10
11 $(".teshu").click(function() {
12 console.log($(this).index());
13 })
对应思想：编程中比较常用的一种就是对应思想。
举例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 // 点击box中的p 让对应的box1中的p改变颜色
16 $("#box p").click(function() {
17 console.log($(this).index());
18 KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box1 p").eq((this).index()).css(“background-color”, “red”);
19 })
20
