js jquery获取所有同级相邻元素,同tag标签,中间有间隔其他tag的不算,不是siblings

jquery 选中所有同级相邻的元素,不是siblings选取的所有同级元素,不管相邻不相邻。

如下面案例:

我只想获取 相邻 的 h4 标签,中间一旦有 p 隔开,就不算。一旦点击一个tag是h4,所有相邻的 h4 同级元素一样触发添加样式。

思路是:在加载页面的时候,所有同级元素遍历一遍,加上各自的class(开始是selected1),一旦有其他tag间隔,跳过 ,class改变(+1变成selected2),这样所有相邻的同级元素 class就都一样,当点击任一元素时候,通过class可以同时触发。

复制代码
 1 <html>
 2 <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
 3     <style type="text/css">
 4         .bred{ background: #f00;}
 5     </style>
 6 <body>
 7 <script type="text/javascript" src='jquery.js'></script>
 8 <div class='bb'>
 9     <h4>第一个</h4>
10     <h4>第二个</h4>
11     <p>我是截断了</p>
12     <h4>第三个</h4>
13     <h4>第四个</h4>
14     <h4>第五个</h4>
15     <h4>第六个</h4>
16     <p>我是截断了22</p>
17     <h4>第七个</h4>
18     <h4>第八个</h4>
19     <h4>第九个</h4>
20     <h4>第10个</h4>
21 </div>
22 
23 
24 <script type="text/javascript">
25     $(function(){
26         var blockCounter = 1;
27         $('.bb').children().each(function(){
28             if($(this)[0].tagName=='H4'){
29                 $(this).addClass('selected'+blockCounter);
30             }else{
31                 blockCounter++;
32             };
33         })
34 
35         $('h4').click(function(){
36             var cc = $(this).attr('class');
37             $('.'+cc).addClass('bred');
38         })
39     })
40 
41 </script>
42 </body>
43 </html>
复制代码

 

posted on   longlongcheng  阅读(901)  评论(0编辑  收藏  举报

编辑推荐:
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
阅读排行:
· 盘点!HelloGitHub 年度热门开源项目
· DeepSeek V3 两周使用总结
· 02现代计算机视觉入门之:什么是视频
· C#使用yield关键字提升迭代性能与效率
· 2. 什么?你想跨数据库关联查询?

导航

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示