JQuery中节点遍历方法实例_Javascript教程-查字典教程网
JQuery中节点遍历方法实例
JQuery中节点遍历方法实例
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲述了JQuery中节点遍历方法。分享给大家供大家参考。具体如下:jQuery节点遍历$(function(){//-----举例1...

本文实例讲述了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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery节点遍历</title> <script src="jquery-1.6.2.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>

希望本文所述对大家的jQuery程序设计有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类