一、序号的问题
1.1 eq()
举例：
1 <div> 2 <p></p> 3 <p></p> 4 <p></p> 5 <p></p> 6 </div> 7 <div> 8 <p></p> 9 <p></p> 10 <p></p> 11 <p></p> 12 </div> 13 <div> 14 <p></p> 15 <p></p> 16 <p></p> 17 <p></p> 18 </div> 19 <div> 20 <p></p> 21 <p></p> 22 <p></p> 23 <p></p> 24 </div> 25 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 26 <script type="text/javascript"> 27 // 点击div让它的第一个儿子变色 28 $("div").click(function() { 29 $(this).children().eq(0).css("background-color", "red"); 30 }) |
eq(): 选中元素大队列的排名，与亲兄弟的排名没有直接关系。
eq(): 选中元素不同， 序号也是不相同的。
1 <div> 2 <p></p> 3 <p></p> 4 <p></p> 5 <p></p> 6 </div> 7 <div id="box1"> 8 <p></p> 9 <p></p> 10 <p>我想变红</p> 11 <p></p> 12 </div> 13 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 14 <script type="text/javascript"> 15 $("p").eq(6).css("color", "red"); 16 $("#box1 p").eq(2).css("color", "blue"); 17 $(".teshu").eq(3).css("color", "orange"); 18 </script> |
1.2 index()
index(): 表示亲兄弟的排名，无视亲兄弟的类型。只要是同一个父节点就是亲兄弟。
DOM结构：
1 <div> 2 <ul> 3 <li>1</li> 4 </ul> 5 <h3>h3</h3> 6 <p></p> 7 <p></p> 8 <p id="teshu">输出亲兄弟的排名</p> 9 <p></p> 10 </div> |
执行代码：
1 // 点击teshu输出亲兄弟的排名 2 $("#teshu").click(function() { 3 console.log($(this).index()); 4 }) |
index()的值非常稳定，无视选择器的选择 都是弹出2
DOM结构：
1 <div> 2 <p></p> 3 <p></p> 4 <p></p> 5 <p></p> 6 </div> 7 <div id="box1"> 8 <p></p> 9 <p></p> 10 <p>弹出亲兄弟的排名</p> 11 <p></p> 12 </div> |
执行代码：
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 <div id="box"> 2 <p></p> 3 <p></p> 4 <p></p> 5 <p></p> 6 </div> 7 <div id="box1"> 8 <p></p> 9 <p></p> 10 <p></p> 11 <p></p> 12 </div> 13 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 14 <script type="text/javascript"> 15 // 点击box中的p 让对应的box1中的p改变颜色 16 $("#box p").click(function() { 17 console.log($(this).index()); 18 $("#box1 p").eq($(this).index()).css("background-color", "red"); 19 }) 20 </script> |
关注微信公众号“icketang”，获取最新前端资讯，学习资料
完整笔记、web前端视频教程，请添加微信“haomei0452”免费领取
B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战
