jQuery 7 节点遍历

jQuery提供了非常好的方法去遍历节点 :

next("过滤元素"):用于获取节点之后紧临的第一个同辈元素。如：$(".myclass").next("div")->获取所有引用myclass样式后的第一个div元素。

nextAll("过滤元素"):用于获取节点之后的所有同辈元素。$(".myclass").nextAll("div")->获取所有引用myclass样式后的所有div元素.

siblings("过滤元素"):用于获取所有的兄弟（同辈）元素. $(".myclass").siblings("li")->获取所有引用myclass样式的兄弟li节点

实例1（运行时把jQuery代码一个个执行就可看到效果）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("div").click(function () {
             alert($(this).next("div").text());  //显示同辈下个节点的名称
             alert($(this).next().text()); //显示div后面第一个p的值，如果div后没有p,则它显示空
             alert($(this).nextAll("div").text());//显示所有选择之后div的值
                        $.each($(this).nextAll(), function () {
                            $(this).css("background", "red"); //设置所选择的后面的所有元素css
                        })
                        $(this).nextAll().css("background", "red");//自动迭代
                        $(this).css("background", "red"); $(this).siblings("div").css("background", "green"); //点选的为红色，其它为绿色
            $(this).css("background", "red").siblings("div").css("background","white");
                      alert($(this).siblings("p").text());//所有同辈元素，不加p过滤器，就会把所有的加上
        })
    });

    
</script>
</head>
<body>
<div>aaaa</div>
<div>bbb</div>
<div>cccc</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>
dddd
  <input type="text" value="hihi" />
   <input type="button" value="click" />
</div>
<div>eee</div>
<div>fffff</div>
</body>
</html>

 

posted on 2013-05-25 15:03  天上星  阅读(1087)  评论(0)  编辑  收藏  举报

导航