主要自己总是不记得

结构如下，涉及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. Redis过期命令

    Redis键的过期时长的设定 ·命令名称:EXPIRE ·语法:EXPIRE key seconds ·功能:为给定key设置生存时间,当key过期时(生存时间为0),它会被自动删除 ·返回值:设置成 ...

  2. The Heaviest Non-decreasing Subsequence Problem

    最长非递减子序列变形题,把大于等于10000的copy五次放回去就可以了 ac代码: #include <cstdio> #include <cstring> #include ...

  3. [Vue]vue-router嵌套路由(子路由)

    总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1.重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如 ...

  4. android 蓝牙连接端(客户端)封装

    0.权限  AndroidManifest.xml <uses-permission android:name="android.permission.BLUETOOTH"/ ...

  5. .netcore 上传

    BS 上传文件,就是 <input type="file" name="file" />  这个选择文件之后,浏览器保存了文件路径,上传的时候,把这 ...

  6. layui下拉多选formSelects使用方法

    下载formSelects-v4插件(引入formSelects-v4.css和formSelects-v4.js) 下载地址:https://fly.layui.com/extend/formSel ...

  7. vue学习（4）-组件的创建，父子组件传值，$refs

    模块化:代码逻辑 组件化:UI 组件的创建:1.

  8. [LeetCode] 46. Int数组全排列 ☆☆☆(回溯)

    描述 给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2, ...

  9. vim文件时自动添加作者、时间、版权等信息

    在工作中,搞运维的工程师往往会编写或完善自动化脚本时,都会手动添加表头注释,例如版权声明.作用.时间等信息提示,如果每次都手动编辑添加会大大消耗时间,所有我们可以利用快捷方法来节省时间,一种是手动在家 ...

  10. Computer Vision_18_Image Stitching： Image Alignment and Stitching A Tutorial——2006（book）

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...