主要自己总是不记得

结构如下，涉及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>

随手记录---jq如何判断当前元素是第几个元素的更多相关文章

  1. jQuery判断当前元素是第几个元素&获取第N个元素

    假设有下面这样一段HTML代码: <ul> <li>jQuery判断当前元素是第几个元素示例</li> <li>jQuery获取第N个元素示例</ ...

  2. Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件）

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  3. canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

    canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) ...

  4. JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件）

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  5. 有一个集合，判断集合里有没有“world”这个元素，如果有，添加“javaee”

    // 有一个集合,判断集合里有没有“world”这个元素,如果有,添加“javaee” List list = new ArrayList(); list.add("world") ...

  6. jQuery判断一个元素是否为另一个元素的子元素

    判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); }; 判断 ...

  7. jQuery判断一个元素是否为另一个元素的子元素(或者其本身)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...

  8. 记录--jquery 获取父级、子级、兄弟元素 + 实例

    需求如下: 三条数据,需点击其中一条数据在其下面展示与此数据关联的图片.主要功能可能是在点击的数据下增加显示行 思路: 把需要点击增加的数据先隐藏.点击后再将其显示出来. 知识点: jQuery.pa ...

  9. JS 之如何在插入元素时插在原有元素的前面而不是末尾

    语法: 父级.insertBefore(新元素,被插入的元素):          //在指定的元素前面加入一个新元素 父级.insertBefore(新元素,父级.children[0]); //在 ...

随机推荐

  1. 22-MySQL DBA笔记-其他产品的选择

    第22章 其他产品的选择 本章将为读者介绍其他的数据库产品,主要是NoSQL产品的选择.读者在熟悉MySQL之外,也应该了解其他的数据库产品.本章的目的是给读者一个引导,如何选择一些NoSQL产品,而 ...

  2. winform c# 请求网站，返回Json字符串

    private void callApibjhb() { //输出执行的开始时间 Console.WriteLine(string.Format("Bind {0}", DateT ...

  3. edk2中子目录介绍

    edk2中子目录介绍 来源 https://blog.csdn.net/rikeyone/article/details/80760204 参考:https://github.com/tianocor ...

  4. python基础之迭代器协议和生成器（一）

    一 递归和迭代 二 什么是迭代器协议 1.迭代器协议是指:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代 (只能往后走不能往前 ...

  5. Python练习_函数进阶_day10

    1. 1.作业 1,写函数,接收n个数字,求这些参数数字的和.(动态传参) 2,读代码,回答:代码中,打印出来的值a,b,c分别是什么?为什么? a=10 b=20 def test5(a,b): p ...

  6. springboot启动流程（一）构造SpringApplication实例对象

    所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 启动入口 本文是springboot启动流程的第一篇,涉及的内容是SpringApplicat ...

  7. #LOF算法

    a.每个数据点,计算它与其他点的距离 b.找到它的K近邻,计算LOF得分 clf=LocalOutlierFactor(n_neighbors=20,algorithm='auto',contamin ...

  8. JS （二）

    ]1 函数 1 函数就是一段待执行的代码段 2 函数可以实现功能的封装,可以实现代码的复用 3 函数使用: 1 函数声明 2 函数调用 4 语法: 1 函数声明 1 使用function关键字进行函数 ...

  9. IT 界那些朗朗上口的“名言”

    中国有很多古代警世名言,朗朗上口,凝聚了很多故事与哲理.硅谷的互联网公司里头也有一些这样的名言,凝聚了很多公司价值观和做事的方法,对于很多程序员来说,其影响潜移默化! Stay hungry Stay ...

  10. 记录一次OOM排查经历

    我是用了netty搭建了一个UDP接收日志,堆启动配置 Xmx256  Xms256 ,项目刚启动的时候,系统进程占用内存很正常,在250M左右. 长时间运行之后发现,进程占用内存不断增长,远远超过了 ...