<!DOCTYPE html>
<html>
<head>
<style>
.siblings * { display: block; border: 2px solid lightgrey; color: lightgrey;
padding: 5px; margin: 15px; }
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function() {
//$("h2").siblings().css({"color":"red","border":"2px solid red"});
$("h2").prev().css({
"color": "red",
"border": "2px solid blue"
}); //當前元素的上一個prev()元素
$("h2").next().css({
"color": "red",
"border": "2px solid yellow"
}); //當前元素的下一個next()元素
$("h2").next().next().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body class="siblings">
<div>
div (父)
<p>
p1
</p>
<span>
span
</span>
<h2>
h2
</h2>
<h3>
h3
</h3>
<p>
p2
</p>
<p>
p3
</p>
<p>
p4
</p>
</div>
</body>
</html>