jQuery遍历之同级遍历(siblings、next、nextAll、nextUntil方法)

本文介绍如何使用jQuery的siblings方法来改变指定元素的兄弟元素的样式,通过实例展示了siblings方法的效果,同时对比了next、nextAll及nextUntil等方法的不同作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在div中写下如下代码

div class="bd">
   <p>P</p>
   <h2>h2</h2>
   <h3>h3</h3>
   <h4>h4</h4>
   <h5>h5</h5>
   <h6>h6</h6>
</div>
$(document).ready(function(){
    $("h4").siblings().css({border:"3px solid #FF0000"});
    //除自己外所有同级元素都会被修改
    //$("h4").next().css({border:"3px solid #FF0000"});
    //下一个元素被修改
    //$("h4").nextAll().css({border:"3px solid #FF0000"});
    //下面的所有元素都被修改
    //$("h4").nextUntil("h6").css({border:"3px solid #FF0000"});
    //h4和h6之间的元素被修改
});

运行结果

除了h4之外,所有的标签都被改变了颜色,这是siblings方法的作用(其他方法请自行演示,效果在注释中可以看到)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值