jquery学习系列6(节点遍历[next()、nextAll()、siblings()])

jQuery兄弟元素操作

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34007020

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/aspneteye/articles/2038640.html

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4
5 <script language="javascript" src="js/jquery-1.5.js"></script>
6
7 <script language="javascript">
8 //next()得到下一个就近的那个元素
9 $(function() {
10 // $("div").click(function() {
11 // alert($(this).next().text());
12 // })
13 //next("x")得到下一个x那个元素,如果下一个元素不是x元素则显示空
14 // $("div").click(function() {
15 // alert($(this).next("div").text());
16 // })
17 //nextAll取得之后所有的元素
18 // $("div").click(function() {
19 // alert($(this).nextAll().text());
20 // })
21 //nextAll("div")取得之后所有的div元素,其他元素不显示
22 // $("div").click(function() {
23 // alert($(this).nextAll("div").text());
24 // })
25 //nextAll("div")取得之后所有的div元素,其他元素不显示
26 // $("div").click(
27 // function() {
28 // //法1比较麻烦
29 // // $.each($(this).nextAll("div"), //取元素
30 // // function() {
31 // // $(this).css("background", "red")//操作元素
32 // //});
33 // //法2
34 // $(this).nextAll("div").css("background", "red")
35
36 // })
37 //siblings("x")用法得到所有同一级别x的元素：比较下面两种方法
38 // $("div").click(function() { $(this).css("background", "red"); $(this).siblings("div").css("background", "white"); })
39 $("div").click(function() { $(this).css("background", "red"); $(this).siblings("div").css("background", "blue"); })
40 })
41 </script>
42
43 </head>
44 <body>
45 <div>
46 aa</div>
47 <div>
48 bb</div>
49 <!--点击bb的时候显示pp(就近的那个元素)->
50 <p>
51 pp</p>
52 <div>
53 cc</div>
54 <div>
55 dd</div>
56 </body>
57 </html>

转载于:https://www.cnblogs.com/aspneteye/articles/2038640.html