jQuery基础教程(十五)

同胞拥有相同的父元素。通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

常用的同胞元素遍历方法如下：

方法	说明
siblings()	返回被选元素的所有同胞元素。
next()	返回被选元素的下一个同胞元素。
nextAll()	返回被选元素后的所有同胞元素。
prev()	返回被选元素的前一个同胞元素。
prevAll()	返回被选元素前的所有同胞元素。

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程之遍历-同胞</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li>
            蔬菜
            <ul class="vg">
                <li>西红柿</li>
                <li>土豆</li>
                <li>南瓜</li>
                <li id="mushroom">香菇</li>
                <li>冬瓜</li>
                <li>菠菜</li>
            </ul>
        </li>
        <li>
            水果
            <ul class="fruit">
                <li>苹果</li>
                <li>草莓</li>
                <li>葡萄</li>
            </ul>
        </li>
    </ul>
</div>
<script>

    $(function(){
        $("#mushroom").siblings().each(function(i,e){
            console.log($(e).text());
        })
        console.log( "香菇后一个元素："+$("#mushroom").next().text());
        console.log( "香菇前一个元素："+$("#mushroom").prev().text());
        console.log("-------香菇之后-------");
        $("#mushroom").nextAll().each(function(i,e){
            console.log($(e).text());
        })
        console.log("-------香菇之前-------");
        $("#mushroom").prevAll().each(function(i,e){
            console.log($(e).text());
        })
    })
</script>
</body>
</html>

运行效果：