jQuery的7個同級選擇器
阿新 • • 發佈：2018-12-30
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>