信鸽网

JQuery中节点遍历方法实例

  作者：bea

本文实例讲述了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

本文实例讲述了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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: