主要自己总是不记得

结构如下，涉及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. SQL Server 输出 XML

    一.概述 SELECT 查询将结果作为行集返回.在 SQL 查询中指定 FOR XML 子句,从而将该查询的正式结果作为 XML 来检索.FOR XML 子句可以用在顶级查询和子查询中.顶级 FOR ...

  2. 函数实现计算等差数列的第n项

    等差数列的第n项 描述 等差数列是指从第二项起,每一项与它的前一项的差等于同一个常数的一种数列,这个常数叫做等差数列的公差.‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬ ...

  3. javaweb常识

    Tomcat下载地址www.apache.org 在电脑中查看java版本:cmd中输入java -version tomcat解压后目录 bin:放可执行文件(如startup.bat   shut ...

  4. 前端知识总结--js异步事件顺序

    js中异步事件中容易混淆的 Promise 和 setTimeout 的执行顺序是怎样的? setTimeout(() => console.log(1), 0); new Promise(fu ...

  5. JS 学习书籍电子版PDF下载

    JavaScript权威指南(第6版)(中文版) 链接:https://pan.baidu.com/s/1H1v77UY-yh7oDxonRjd0GA 提取码:r3pu JavaScript DOM编 ...

  6. stm32 i2c eeprom 24C02

    电路图 相关文章:http://blog.csdn.net/zhangxuechao_/article/details/74936798 举例 #define i2c_scl PBout(10) #d ...

  7. html 输入框ios苹果手机显示九宫格数字键盘

    只需要在input标签加上type=‘tel’  即可

  8. What Linux bind mounts are really doing

    Lots of Unixes have some form of 'loopback' mounts, where you can mount a bit of an existing filesys ...

  9. 【转】PS1应用-修改linux终端命令行字体颜色

    原文链接:https://www.jianshu.com/p/4239d3ea72fe cd ls -la vim .bashrc 在.bashrc中加入这一行: PS1="\[\e[37; ...

  10. OpenCV读取图像问题：OpenCV(3.4.3) D:\Build\OpenCV\opencv-size.width0 && size.height0 in function 'cvimshow'

    版权声明:本文为博主原创文章,转载 请注明出处:https://blog.csdn.net/sc2079/article/details/83280067 - 问题与解决 最近正在学OpenCV,发现 ...