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 2018-04-02 18:30  longlongcheng  阅读(894)  评论(0)  编辑  收藏  举报

导航