JQuery 节点遍历的例子

发布时间:2020-12-09编辑:脚本学堂
本文介绍了jquery 实现节点遍历的方法,JQuery 节点遍历的小例子,有需要的朋友参考下。

例子,jquery 节点遍历 实现代码。
 

复制代码 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery 节点遍历_www.jb200.com</title>
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //-----举例1.获取节点之前的挨着的第一个兄弟元素
            //var $divs = $("#div2").prev("div");     //只获取div
            //ShowArraysID($divs);
            //-----举例2.获取节点之前的所有兄弟元素
            //var $divs = $("#div2").prevAll("div");  //只获取div
            //var $divs = $("#div2").prevAll();         //获取所有兄弟元素
            //ShowArraysID($divs);
            //-----举例3.获取节点之后的挨着的第一个兄弟元素
            //var $divs = $("#div2").next("div");     //只获取div div2后紧挨着的是input所以返回零个元素
            //ShowArraysID($divs);
            //-----举例4.获取节点之后的所有兄弟元素   类似prevAll  方向相反
            //var $divs = $("#div2").nextAll();         //获取所有兄弟元素
            //ShowArraysID($divs);
            //-----举例4.siblings()方法用于获取所有同辈元素(前后都拿到)
            //$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。
            //var $divs = $("#div2").siblings("div");   //获取id为div2前后的所有div元素
            //ShowArraysID($divs);
            var $divs = $("#div2").siblings();   //获取id为div2前后的所有元素
            ShowArraysID($divs);
        });

        function ShowArraysID($jqueryArr) {
            var output = "";
            for (var i = 0; i < $jqueryArr.length; i++) {
                if (output == "") {
                    output = $jqueryArr.eq(i).attr("id");
                }
                else {
                    output += "," + $jqueryArr.eq(i).attr("id");
                }
            }
            alert(output);
        }
    </script>
</head>
<body>
    <div id="div1">我是div1</div>
    <input id="Text3" type="text" value="我是text1" />
    <div id="div2">我是div2</div>
    <input id="txt1" type="text" value="我是text1" />
    <div id="div3">我是div3</div>
    <input id="Text1" type="text" value="我是text2" />
    <div id="div4">我是div4</div>
    <input id="Text2" type="text" value="我是text3" />
    <div id="div5">我是div5</div>
</body>
</html>