您的位置:首页 - 文章 - HTML/CSS, JavaScript - 正文

jQuery的7个同级选择器

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery遍历之同级遍历</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
* { margin:0px; padding:0px;
}
.bd * { display:block; border:1px solid gray; color:gray; margin:5px; padding:5px; text-align:center;
}
</style>
</head>
<body>
<div class="bd"> <p>p</p> <h2>2</h2> <h3>3</h3> <h4>4</h4> <h5>5</h5> <h6>6</h6>
</div>
<script>
$(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)
});
</script>
</body>
</html>

 

本文原创,作者:西决,其版权均为品创网络所有。如需转载,请注明出处:https://www.sxpcwlkj.com/jquery%e7%9a%847%e4%b8%aa%e5%90%8c%e7%ba%a7%e9%80%89%e6%8b%a9%e5%99%a8/

发表评论