您的位置：首页 > Web前端 > JQuery

JQuery获取子孩子和兄弟元素的方法

2015-03-08 10:58 295 查看

这里说的获取当前元素的子孩子和兄弟元素的方法，另外还有遍历和指定的具体要求：

01.html代码：

<!DOCTYPE html>
<html>
<head>
<title>测试jquery</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="01.css"/>
<script type="text/javascript" src="../test1/JQuery/jquery.js"></script>
<script type="text/javascript" src="01.js"></script>
</head>
<body>
<input type="button" value="测试1" id="button_1">
<input type="button" value="测试2" id="button_2"><br/>
<div id="div1" class="div_1">
This is div1
</div>
<div id="div2" class="div_2">
This is div_2
<div id="div_2_1" class="div_2_1">
This id div2_1
</div>
<div id="div2_2" class="div_2_2">
This id div2_2
</div>
<div id="div2_3" class="div_2_3">
This id div2_3
</div>
</div>
<div id="div3" class="div_3">
This is div_3
</div>
</body>
</html>

01.css

body{
background-color: #efefef;
}
.div_1,.div_2,.div_2_1,.div_2_2,.div_2_3,.div_3{
position: absolute;
}
.div_1{
width: 200px;
height: 200px;
background-color: red;
}

.div_2{
width: 300px;
height: 700px;
background-color: yellow;
margin-left: 250px;
}
.div_2_1{
width: 200px;
height: 200px;
background-color: black;
margin: 10px 0px 0px 50px;
}
.div_2_2{
width: 200px;
height: 200px;
background-color: green;
margin: 220px 0px 0px 50px;
}
.div_2_3{
width: 200px;
height: 200px;
background-color: blue;
margin: 430px 0px 0px 50px;
}
.div_3{
width: 200px;
height: 200px;
background-color: white;
margin: 0px 0px 0px 600px;
}

利用外部js文件的方式来处理如下：

01.js

$(document).ready(function(){
$("#button_1").click(function(){
//所谓的子孩子就是当前元素的子代
$('.div_2').children().each(function(){
window.alert($(this).text());
});
//下面是指定第几个子孩子
//alert($(".div_2").children().eq(0).text());
});
$("#button_2").click(function(){
//同辈元素的获取
//$('.div_1').nextAll().each(function(){
//window.alert($(this).text());
alert($(".div_2").nextAll().eq(0).text());
});
$("#button_3").click(function(){
//获取div_1前面的所有的兄弟元素
/*$(".div_3").prevAll().each(function(){
alert($(this).text());
});
*/
//获取.div的前面的第几个元素的内容
alert($(".div_2").prev().eq(0).text());
});
$("#button_4").click(function(){
$(".div_1").siblings().each(function(){
alert($(this).text());
});
});
});

以上是关于获取子元素和兄弟元素的具体方法，仅供参考

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航