主要自己总是不记得

结构如下，涉及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. QMap里面的值任然是一个QMap，在做循环插入的时候需要记得清空。

    这个问题是我以前的一个问题,当时由于有其他的事情去处理就忘记了,前段时间我的项目要进行集成测试了,为了避免这个缺陷,只能再把这个问题想起来了,再进行解决.有很多问题你觉得不应该发生,其实很多时候都是逻 ...

  2. 怎样确保页面中的js代码一定是在DOM结构生成之后再调用

    有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错: <head> <script> console.log(document.bod ...

  3. java基础知识学习 内存相关

    Java 内存分配策略 静态存储区(方法区):主要存放静态数据.全局 static 数据和常量.这块内存在程序编译时就已经分配好,并且在程序整个运行期间都存在. 栈区 :当方法被执行时,方法体内的局部 ...

  4. 博客自定义1-皮肤模板 基于SimpleMemory 添加到顶部小按钮

    周五公司事不是很紧,打算好好弄下自己的博客,这是自己学习和记录分享地方, 首先请记得申请js权限,默认不支持的,博主是已经申请通过后的样子 接着先选择cnblogs一个现有的模板,我这个就是在他的模板 ...

  5. VUE CLI3 less 全局变量引用

    方法一 1.添加依赖 style-resources-loader 2.vue.config.js中添加 module.exports = { pluginOptions: { 'style-reso ...

  6. 如何使 JavaScript 更高效？

    传统的 Web 页面不会包含很多脚本,至少不会太影响 Web 页面的性能.然而,Web 页面变得越来越像应用程序,脚本对其的影响也越来越大.随着越来越多的应用采用 Web 技术开发,脚本性能的提升就变 ...

  7. SAP Kyma(Extension Factory on SAP Cloud Platform)的架构简介

    SAP kyma主要分三大块组成: (1) Application connector simplify and securely connect external systems to Kyma a ...

  8. 结对编程作业（python实现）

    一.Github项目地址:https://github.com/asswecanfat/git_place/tree/master/oper_make 二.PSP2.1表格: PSP2.1 Perso ...

  9. 【SpringMVC】入门

    一.概述 1.1 SpringMVC是什么 1.2 MVC在b/s系统的应用 1.3 SpringMVC 原理 二.入门程序 2.1 需求 2.2 引入依赖 2.3 前端控制器 2.4 springm ...

  10. 成为一个高级java架构师所需要具备那些技能呢？

    一.什么是架构师 所谓架构师,思考的是全局的东西,是如何组织你的系统,以达到业务要求,性能要求,具备可扩展性(scalability),可拓展性(extendability),前后兼容性等.可能涉及到 ...