zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    鼠标滑过,解决ul下 li下a的背景与父级Li不同宽的问题
    php函数
    常用函数之数组函数
    php流程控制
    php运算符
    php常量
    php变量的数据类型
    PHP是什么
    css3新增属性
    html5的常用标签
  • 原文地址:https://www.cnblogs.com/lola/p/8696210.html
Copyright © 2011-2022 走看看