JQuery中節點遍歷方法實例

2024-05-06 16:20:31

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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>

<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>