jQuery—同级遍历(next和prev)

重点:重点:重点:向上遍历兄弟节点的所有方法,选择的前一个元素,必须要是class的名字或者Id名字,不能和向下遍历兄弟节点一样直接指定标签,否则只遍历头一个

再一个,遍历所指定的区间都是开区间,如parentUntil()、nextUntil()、prevUntil(),也就是不包含首末两个元素

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同级遍历</title>
    <script src="jquery-3.3.1.js"></script>
    <script src="traverseColleague.js"></script>
    <style>
        div *{
            display: block;
            /*块元素显示,带有换行符*/
            border: 3px solid goldenrod;
            color: blueviolet;
            padding: 10px;
            margin: 15px;
        }
    </style>
</head>
<body>
       <div>
           <h2>法师</h2>
           <h3>猎人</h3>
           <h4>德鲁伊</h4>
           <h5 id="Idh5" class="classH5">术士</h5>
           <h6>圣骑士</h6>
       </div>
    
       <button id="siblingsBtn">siblings</button>
       <button id="nextBtn">next</button>
       <button id="nextAllBtn">nextAll</button>
       <button id="nextUntilBtn">nextUntil</button>
       <button id="prevBtn">prev</button>
       <button id="prevAllBtn">prevAll</button>
       <button id="prevUntilBtn">prevUntil</button>
       
</body>
</html>

JS代码:

$(document).ready(function () {
    $("#siblingsBtn").click(function () {
        $("h3").siblings().css({color:"red"});
    });
    $("#nextBtn").click(function () {
        $("h3").next().css({color:"red"});
    });
    $("#nextAllBtn").click(function () {
        $("h3").nextAll().css({color:"red"})
    });
    $("#nextUntilBtn").click(function () {
        $("h3").nextUntil("h5").css({color:"red"})
    });
    $("#prevBtn").click(function () {
        $("#Idh5").prev().css({color:"red"});
    });
    $("#prevAllBtn").click(function () {
        $("#Idh5").prevAll().css({color:"red"})
    });
    $("#prevUntilBtn").click(function () {
        $(".classH5").prevUntil("h3").css({color:"red"})
    });
});
//
//重点:重点:重点:向上遍历兄弟节点的所有方法,选择的前一个元素,必须要是class的名字或者Id名字
// 不能和向下遍历兄弟节点一样直接指定标签,否则只遍历头一个
//

//siblingsBtn修改同级除自己以外其他所有元素
//next下一个兄弟元素
//nextAll向下所有的兄弟元素
//nextUntil指定区间(开区间)

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/81979879