随手记录---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+'\n');
    
    var myccIndex = $('.mycc').index('.cc');
    $('.mycc').append('---------从0算起，我在类cc中排'+myccIndex);


}

</script>

</body>
</html>

 

posted @ 2019-01-23 11:21  l.w.x  阅读(6450)  评论(0)  编辑  收藏  举报