zoukankan      html  css  js  c++  java
  • 随手记录---jq如何判断当前元素是第几个元素

    主要自己总是不记得

    结构如下,涉及jq中获取当前元素是父元素的的第几个元素,jq中获取某类在同类元素中占第几,each方法

    <div class="parent">
        <div class="c">
            c
            <div class="cc">cc</div>
             
        </div>
        <div class="c">
            c
            <div class="cc">cc</div>
            
        </div>
        <div class="c myc">
            c
            <div class="cc mycc">cc</div>
             
        </div>
        <div class="c">
            c
             <div class="cc">cc</div>
            
        </div>
    </div>

    1、jq中获取当前元素是父元素的的第几个元素

      如上面的dom结构,我们知道,所有类c的元素都是类parent的子元素,所以我们可以直接使用index来获取类myc在父元素中的顺序(从0开始),代码如下:

    $('.myc').index();

    2、jq中获取某类在同类元素中占第几

      而cc类则不同,你想要获取的顺序可能不是相对父元素的位置,因为这几个cc类元素属于不用的父元素c类,如果你使用$('.mycc').index(),无例外,结果是0而不是想要得到的2,我们的获取方式还是使用index,但是不大一样。

    var myccIndex = $('.mycc').index('.cc');

    3、each()方法

      我知道each()方法不错,但是总是没有使用它的意识……它是自带index参数的

      

    $('.c').each(function(index,element){
            $(this).append('---------------------'+index);
        });

    4、js中获取当前元素处于的顺序

      据我了解,没有简便的方法,你可以自己留下标识,然后遍历确定。

    5、jq中获取第N个元素和js中获取第N个元素

      老生常谈了,留点记录:

      

    var ele = $('.c').eq(2).find('.cc').eq(0);//jq中获取c类的第2个元素的第0个cc类子元素
    var elem = document.getElementsByClassName('c')[2].getElementsByClassName('cc')[0];//js中获取c类的第2个元素的第0个cc类子元素

     完整代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .cc{
            margin-left:20px;
        }
    </style>
    </head>
    <body>
    
    <div class="parent">
        <div class="c">
            c
            <div class="cc">cc</div>
             
        </div>
        <div class="c">
            c
            <div class="cc">cc</div>
            
        </div>
        <div class="c myc">
            c
            <div class="cc mycc">cc</div>
             
        </div>
        <div class="c">
            c
             <div class="cc">cc</div>
            
        </div>
    </div>
    
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
    window.onload=function(){
        $('.c').each(function(index,element){
            $(this).append('---------------------'+index);
        });
        var mycIndex = $('.myc').index();
        $('.myc').append('--我是myc,从0算起,我在父元素parent中排'+mycIndex);
        
        var myccIndex = $('.mycc').index();
        $('.mycc').append('---我是mycc,从0算起,我在父元素myc中排'+myccIndex+'
    ');
        
        var myccIndex = $('.mycc').index('.cc');
        $('.mycc').append('---------从0算起,我在类cc中排'+myccIndex);
    
    
    }
    
    </script>
    
    </body>
    </html>
    当你深入了解,你就会发现世界如此广袤,而你对世界的了解则是如此浅薄,请永远保持谦卑的态度。
  • 相关阅读:
    文件和文件夹权限
    CentOS 8修改用户密码
    Linux新建用户默认设置
    二、工具类
    一、MyBatis 核心配置文件
    十一、容器总结
    十、Collections工具类
    九、集合与数组之间的转化
    八、TreeSet
    ※大神※
  • 原文地址:https://www.cnblogs.com/liwxmyself/p/10307514.html
Copyright © 2011-2022 走看看