jquery兄弟标签_JQuery获取子孩子和兄弟元素的方法

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

01.html代码：

测试jquery

This is div1

This is div_2

This id div2_1

This id div2_2

This id div2_3

This is div_3

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());

});

});

});

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