• 随手记录---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>
    当你深入了解,你就会发现世界如此广袤,而你对世界的了解则是如此浅薄,请永远保持谦卑的态度。
  • 相关阅读:
    如何将一个PDF文件里的图片批量导出
    (二十二)golang--时间和日期相关函数
    (二十一)golang--字符串中的函数
    (二十)golang--变量的作用域
    (十九)golang--函数参数的传递方式
    (十八)golang--defer关键字
    (十七)golang--闭包(简单明了)
    (十六)golang--匿名函数
    (十五)golang--init函数
    【自然语言处理】双语数据预处理
  • 原文地址:https://www.cnblogs.com/liwxmyself/p/10307514.html
Copyright © 2020-2023  润新知