正文

jQuery 同胞选择器siblings

Async
Async V管理员 /322阅读/0评论
1120

实例

<!DOCTYPE html>
<head>
<title>jQuery</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
        $(document).ready(function(){
            //返回h2的所有同胞元素
            //$("h2").siblings().css("border","2px solid red");

            //返回h2的下一个同胞元素
            //$("h2").next().css("border","2px solid red");

            //返回h2下面的所有同胞元素
            //$("h2").nextAll().css("border","2px solid red");

            //返回h2到h6的同胞元素 (不包含h6)
            $("h2").nextUntil("h6").css("border","2px solid red");
        })
    </script>
<style>
        .parent{
            display: block;
            border: 2px solid #333;
            color:#333;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>
<div class="parent">
<h1>我是H1标签</h1>
<h2>我是H2标签</h2>
<h3>我是H3标签</h3>
<h4>我是H4标签</h4>
<h5>我是H5标签</h5>
<h6>我是H6标签</h6>
<p>我是P标签</p>
<span>我是span标签</span>
</div>
</body>

运行结果

截屏2023-11-20 16.23.34.png

除非注明，否则均为后台设置版权信息原创文章，转载或复制请以超链接形式并注明出处。