本文通过一个简单的HTML页面示例介绍了如何使用jQuery来遍历DOM中的兄弟节点。示例中展示了如何选取指定元素的所有兄弟节点，并获取它们的outerHTML。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(e) {
var next = $("#demo1").siblings();// 查找兄弟节点，不分前后
alert(next.length);//[3]
alert(next[0].outerHTML);//这个是demo的input
alert(next[1].outerHTML);//这个是demo2的div
alert(next[2].outerHTML);//这个是demo3的input
});
</script>
</head>
<body>
<div>
<input type="text" value="demo" id="demo"/>
<input type="text" value="demo1" id="demo1"/>
<div>
<input type="text" value="demo2" id="demo2"/>
</div>
<input type="text" value="demo3" id="demo3"/>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(e) {
var next = $("#demo1").siblings();// 查找兄弟节点，不分前后
alert(next.length);//[3]
alert(next[0].outerHTML);//这个是demo的input
alert(next[1].outerHTML);//这个是demo2的div
alert(next[2].outerHTML);//这个是demo3的input
});
</script>
</head>
<body>
<div>
<input type="text" value="demo" id="demo"/>
<input type="text" value="demo1" id="demo1"/>
<div>
<input type="text" value="demo2" id="demo2"/>
</div>
<input type="text" value="demo3" id="demo3"/>
</div>
</body>
</html>
扫一扫
1842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
