所谓同袍节点，是指拥有相同父元素的节点。在jQuery中提供了多种同袍节点遍历的方法，如siblings()、next()、nextAll()、prev()、prevAll()和preUntil()等方法
1. siblings()方法： siblings()方法用于返回所匹配元素的同袍元素（但不包括匹配元素），并允许使用选择器进行筛选，其语法格式如下：
$(selector).siblings([childSelector]) $(selector)：表示所匹配的元素childSelector（可选）：表示指定的选择器当siblings()方法提供childSelector参数时，将返回所匹配元素的同袍元素，并使用childSelector选择器进行筛选，否则返回匹配元素的所有同袍元素2. next()方法： next()方法用于返回所匹配元素的紧邻的同袍元素，并允许使用选择器进行筛选，其语法格式如下：
$(selector).next([childSelector]) $(selector)：表示所匹配的元素childSelector（可选）：表示指定的选择器当next()方法提供childSelector参数时，将返回所匹配元素的紧邻的同袍元素，并使用childSelector选择器进行筛选，否则返回匹配元素的所有紧邻的同袍元素3. nextAll()方法： nextAll()方法用于返回所匹配元素的所有紧随的同袍元素，并允许使用选择器进行筛选，其语法格式如下：
$(selector).nextAll([childSelector]) $(selector)：表示所匹配的元素childSelector（可选）：表示指定的选择器当nextAll()方法提供childSelector参数时，将返回所匹配元素的紧邻的同袍元素，并使用childSelector选择器进行筛选，否则返回匹配元素的所有紧邻的同袍元素4. nextUntil()方法： nextUnitl()方法用于返回两个给定元素之间的所有同袍元素，其语法格式如下：
$(selector).nextUntil([expression | element]) $(selector)：表示所匹配的元素参数类型是表达式或DOM对象，表示将返回从$(selector)到表达式选择器（或DOM对象）之间的所有的同袍元素当nextUnitl()方法没有提供参数时，将返回匹配元素的所有同袍元素。示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>同胞元素-jQuery遍历</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </head> <body> <div>div(父节点) <h1>在 DOM 树中水平遍历</h1> <p>有许多有用的方法让我们在 DOM 树进行水平遍历</p> <span>匹配元素中所有的span同胞元素</span> <h2>jQuery 遍历-同胞</h2> <p>$("h2").siblings("p");</p> <h3>同胞拥有相同的父元素。</h3> <p>通过jQuery，您能够在 DOM 树中遍历元素的同胞元素</p> </div> <div>div(父节点) <h2>jQuery next()方法</h2> <p>$("h2").next();</p> <span>next()方法返回被选元素的下一个同胞元素</span> <p>该方法只返回一个元素</p> <h3>亲自试一试</h3> </div> <script type="text/javascript"> $(function (e) { //匹配元素的所有的同胞元素（不包括同胞元素） $("h2").siblings().css({"border":"1px solid red"}); //匹配元素中所有的span同胞元素 $("h2").siblings("span").css({"font-size":"18pt"}); //匹配元素紧邻的同胞元素 $("h2").next().css({"color":"blue"}); //匹配元素紧邻的同胞元素，且该元素是p元素（进一步筛选） $("h2").next("p").css({"font-size":"20pt"}); //匹配元素之后的所有紧随的同胞元素 $("h2").nextAll().css({"color":"red"}); //匹配元素之后的紧随的同胞元素，且是h3元素（进一步筛选） $("h2").nextAll("h3").css({"color":"yellow"}); //从h2到h3之间的所有同胞元素 $("h2").nextUntil("h3").css({"color":"gray"}); }); </script> </body> </html>