主要自己总是不记得

结构如下，涉及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. outlook 升级 及邮件同步方式设置

    **office(outlook2010 32B)升级到office2016 64B时的操作 1.删除office(excel. word等) 2.选择offcie2016 安装程序安装 (outlo ...

  2. C#常用数据结构

    常碰到的几种数据结构:Array,ArrayList,List,LinkedList,Queue,Stack,Dictionary<K,T>: 1.数组是最简单的数据结构.其具有如下特点: ...

  3. solr-jd

    springMVC.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  4. JDBC 学习复习6 学习与编写数据库连接池

    之前的工具类DBUtil暴露的问题 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大的 ...

  5. VisualSVN 关于权限（第2篇）

    最终的答案: 仓库本身不能给他增加访问权限,必须增加否则连不上,不增加的时候 他默认就是No Access: 仓库本身可以理解为:祖宗,他是访问权限的根基.子目录会继承他的权限. 那么既然必须给他增加 ...

  6. stm32 待机模式

    低功耗模式 降低系统时钟速度 不使用APBx和AHB外设时,将对应的外设时钟关闭 睡眠模式(Cortex™-M3内核停止,所有外设包括Cortex-M3核心的外设,如NVIC.系统时钟(SysTick ...

  7. stm32 定时器 通用定时器

    STM32F10xxx 2个基本定时器(TIM6.TIM7) 4个通用定时器(TIM2. TIM3. TIM4和TIM5) 2个高级定时器(TIM1.TIM8) 每个定时器都是完全独立的,没有互相共享 ...

  8. KVM之磁盘管理工具qemu-img小结

    基本语法: qemu-img command [command options] 主要参数: info : 查看镜像的信息: create: 创建镜像: check: 检查镜像: convert: 转 ...

  9. 作为一个java高级工程师的进阶之路

    本文可能可能更偏向于是内心的独白篇和面试技巧总结 一.独白 之前也面试别人,现在轮到自己找工作,怎么说呢,每个面试官的看法不一样,面试的方式就不一样,比如我面试别人我喜欢问项目中他用到了那些,然后针对 ...

  10. InnoDB引擎中的索引与算法9

    5.1 InnoDB支持以下几种常见的索引: B+树索引 全文索引 哈希索引(自适应哈希索引) 关于哈希索引的说明: -- 1.InnoDB的哈希索引是自适应的,其根据表的使用情况自动生成哈希索引,不 ...