jQuery 同级元素
使用 jQuery，您可以在 DOM 树中横向遍历以查找元素的同级。
同级元素都有同一个父级元素
在 DOM 树中横向遍历
有许多有用的 jQuery 方法可以在 DOM 树中横向遍历:
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()
jQuery siblings() 方法
siblings() 方法返回所选元素的所有同级元素。
下面的实例返回 <h2> 的所有同级元素:
实例
<!DOCTYPE html><html><head><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("h2").siblings().css({"color": "red", "border": "2px solid red"});});</script></head><body class="siblings"><div>div (父级)<p>p</p><span>span</span><h2>h2</h2><h3>h3</h3><p>p</p></div></body></html>
您还可以使用可选参数在同级查询时进行筛选。
下面的示例返回 <h2> 的所有同级元素，它们都是 <p> 元素:
实例
<!DOCTYPE html><html><head><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("h2").siblings("p").css({"color": "red", "border": "2px solid red"});});</script></head><body class="siblings"><div>div (父级)<p>p</p><span>span</span><h2>h2</h2><h3>h3</h3><p>p</p></div></body></html>
jQuery next() 方法
next() 方法返回所选元素的后面一个同级元素。
下面的实例返回 <h2> 的后面一个同级元素:
实例
<!DOCTYPE html><html><head><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("h2").next().css({"color": "red", "border": "2px solid red"});});</script></head><body class="siblings"><div>div (父级)<p>p</p><span>span</span><h2>h2</h2><h3>h3</h3><p>p</p></div></body></html>
jQuery nextAll() 方法
nextAll() 方法返回所选元素的后面的所有同级元素。
下面实例返回 <h2> 的后面的所有同级元素:
实例
<!DOCTYPE html><html><head><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("h2").nextAll().css({"color": "red", "border": "2px solid red"});});</script></head><body class="siblings"><div>div (父级)<p>p</p><span>span</span><h2>h2</h2><h3>h3</h3><p>p</p></div></body></html>
jQuery nextUntil() 方法
nextUntil() 方法返回两个给定参数之间的所有后面的同级元素
下面实例返回 <h2> 与 <h6> 之间的同级元素:
实例
<!DOCTYPE html><html><head><style>.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});});</script></head><body class="siblings"><div>div (父级)<p>p</p><span>span</span><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><p>p</p></div></body></html>
jQuery prev(), prevAll() 与 prevUntil() 方法
方法的工作原理与上述方法相同，但具有相反的功能：它们返回前面的同级元素。
jQuery 遍历参考
有关所有 jQuery 遍历方法的完整概述，请访问本站的 jQuery 遍历参考。