在DOM树中横向遍历

在DOM树中有许多有用的jQuery方法可以横向遍历：

siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()jQuery siblings()方法

siblings()方法返回所选元素的所有兄弟元素。

以下示例返回<h3>的所有同级元素：

<!DOCTYPE html><html><meta charset="UTF-8"><title>jq</title><head> <style> .siblings * { display: block; border: 2px solid #ddd; color: #ccc; padding: 5px; margin: 15px; } </style> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function () { $("h3").siblings().css({ "color": "red", "border": "2px solid red" }); }); </script></head><body class="siblings"> <div>div (父元素) <p>p</p> <span>span</span> <h3>h3</h3> <h4>h4</h4> <p>p</p> </div></body></html>jQuery next()方法

next()方法返回所选元素的下一个兄弟元素。

以下示例返回<h3>的下一个兄弟

<!DOCTYPE html><html><meta charset="UTF-8"><title>jq</title><head> <style> .siblings * { display: block; border: 2px solid #ddd; color: #ccc; padding: 5px; margin: 15px; } </style> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> <script> $(document).ready(function () { $("h3").next().css({ "color": "red", "border": "2px solid red" }); }); </script></head><body class="siblings"> <div>div (父元素) <p>p</p> <span>span</span> <h3>h3</h3> <h4>h4</h4> <p>p</p> </div></body></html>jQuery nextAll()方法

nextAll()方法返回所选元素的所有下一个兄弟元素。

以下示例返回<h3>的所有下一个兄弟元素：

<!DOCTYPE html><html><meta charset="UTF-8"><title>jq</title><head> <style> .siblings * { display: block; border: 2px solid #ddd; color: #ccc; padding: 5px; margin: 15px; } </style> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> <script> $(document).ready(function () { $("h3").nextAll().css({ "color": "red", "border": "2px solid red" }); }); </script></head><body class="siblings"> <div>div (父元素) <p>p</p> <span>span</span> <h3>h3</h3> <h4>h4</h4> <p>p</p> </div></body></html>jQuery nextUntil()方法

nextUntil()方法返回两个给定参数之间的所有下一个兄弟元素。

以下示例返回<h3>和<h7>元素之间的所有兄弟元素：

<!DOCTYPE html><html><meta charset="UTF-8"><title>蝴蝶教程（jc2182.com）</title><head> <style> .siblings * { display: block; border: 2px solid #ddd; color: #ccc; padding: 5px; margin: 15px; } </style> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> <script> $(document).ready(function () { $("h3").nextUntil("h7").css({ "color": "red", "border": "2px solid red" }); }); </script></head><body class="siblings"> <div>div (父元素) <p>p</p> <span>span</span> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> <h7>h7</h7> <p>p</p> </div></body></html>可以在线尝试一下jQuery prev(),prevAll() & prevUntil()方法

prev()，prevAll()和prevUntil()方法的工作方式与上述方法类似，但功能相反：它们返回先前的兄弟元素（沿DOM树中的兄弟元素向后遍历，而不是向前遍历）。

更好的jQuery 教程