html选择同级的元素,jQuery的7个同级选择器

jQuery的同级选择器有七个，其中最常用的是next()和prev()，使用时要避免跟after()和before()混淆。前者是获取元素，后者是往指定位置插入值。

通过下面的demo可以清楚的了解这7个同级选择器：

jQuery遍历之同级遍历

* {

margin:0px;

padding:0px;

}

.bd * {

display:block;

border:1px solid gray;

color:gray;

margin:5px;

padding:5px;

text-align:center;

}

p

2

3

4

5

6

$(document).ready(function() {

$("h4").siblings().css({

border: "3px solid red"

}); //同级元素全部修改

$("h4").next().css({

border: "3px solid red"

}); //下一个元素修改

$("h4").nextAll().css({

border: "3px solid red"

}); //下面所有的元素修改

$("h4").nextUntil("h6").css({

border: "3px solid red"

}); //下面元素的区间修改(从next向后找同级元素直到h6)

$("h4").prev("h6").css({

border: "3px solid red"

}); //上面元素的区间修改

$("h4").prevAll("h6").css({

border: "3px solid red"

}); //上面所有的元素修改

$("h4").prevUntil("h6").css({

border: "3px solid red"

}); //上面元素的区间修改(从prev向前找同级元素直到h6)

});