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 阅读(879) 评论(0) 编辑 收藏 举报