css获取父元素下第几个元素出坑和JQuery通过index()获取下标出坑方法

这里首先要区分nth-of-type(n)和nth-child(n)的区别：

nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
nth-child(n) 选择器选取父元素的第 N 个子元素，与类型无关

写个demo理解：

<div class="container"><div>div1</div><p>p1</p><div>div2</div><div>div3</div>
</div>

.contaicer>div:nth-of-type(2){color: red;
}

可以看到文字颜色变红的是第二个div。

如果是用nth-child(n)来写呢？我们看下效果：

 .container>div:nth-child(2){color: red;
}

为什么并没有字体变成红色呢？
.container>div:nth-child(2) 找的是container下第二个子元素，如果这个元素是div，则字体颜色变红，否则则没有变化。

 .container>div:nth-child(3){color: red;
}

.container>div:nth-child(3) 找的是container下第三个子元素，这个元素是div，字体变红。

如果是父元素下的子元素有很多类名不同的子元素，我们需要对其中一个类名中的某个元素做操作呢？

<div class="container"><div class="active">active1</div><div class="abc">abc</div><div class="active">active2</div><div class="abc">abc</div><div class="active">active3</div><div class="active">active4</div>
</div>

类名为container的父元素下有2个类名为abc的子元素，4个类名为active的子元素。
我想让第二个类名为active的子元素字体颜色为红色。

 .container .active:nth-of-type(2){color: red;
}

通过 .container .active:nth-of-type(2) 这个选择器设置了样式之后发现第二个类名为active的元素字体颜色并没有发生变化，我们打印这个选择器看看：

从图上可以看出，类名为active的元素有4个，但是.container .active:nth-of-type(2)这个选择器并没有获取到元素。

这是为什么呢？
nth-of-type(n) 是根据类型获取元素的，跟类名其实没有关系，这个选择器实际上获取的是container下的第二个div元素，如果这个元素的类名为active，则样式发生变化，如果不是，则获取不到这个元素。

我们这个例子当中，container下的第三个div元素类名是active，我们来对第三个元素进行操作：

.container .active:nth-of-type(3){color: red;
}

现在就可以获取到元素啦。

所以一定要注意的是： nth-of-type(n) 这个选择器是根据元素的类型进行选择，跟类名没有关系。

就着这个例子再来说一下jQuery通过 el.index() 获取元素下标的问题。
还是刚刚那个例子，如果我们要通过jQuery获取第二个类名为active的元素的下标。
先给类名为active的div绑定点击事件


$('.active').on('click',function(){console.log($(this).index());
});

按照我们的逻辑来说，我们希望的也应该输出的是下图这样的：

但是实际输出的结果却是：

诶？这是什么呢？为什么输出的是0 2 4 5？
通过观察我们可以发现，0 2 4 5 分别是类名为active的div在父元素中所有元素所对应的索引。
也就是说不管你是通过什么获取的，调用index()这个方法获取的都是相对于父元素的下标。

index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注释：如果未找到元素，index() 将返回 -1。

注意文档说的是 相对于其他指定元素。
这个方法可以传一个参数，也就是相对的元素

获得元素相对于选择器的 index 位置。
该元素可以通过 DOM 元素或 jQuery 选择器来指定。

回到这个例子，如果我们这么写输出的结果就是我们想要的结果了：

$('.active').on('click',function(){console.log($(this).index('.active'));
});

这是说输出点击的元素相对于active这个类名的索引。如果不传就是相对于点击元素的父元素。

css获取父元素下第几个元素出坑和JQuery通过index()获取下标出坑方法相关推荐

html第一个子元素选择,css选中父元素下的第一个子元素(:first-child)
前言最近在项目中用到 :first-child 很容易的就想到了,嗯嗯.这不就是选择第一个元素吗? 好像很好用,平时使用中也没有遇到什么问题,理所当然的就以为它只会选中父元素下的第一个元素,对孙元素 ...
css选中父元素下的第一个子元素
目录标题前言 E:first-child的第一个误区(只会选中我规定的区域中的一个,不会遍历其下有多少个孙或曾孙元素) E:first-child的第二个误区(不管这个E元素前面有几个兄弟,只要我是 ...
html如何更改子元素文字颜色,CSS更改父级悬停上的子元素字体颜色
我试图让它如此:当将鼠标悬停在td上时,跨度内部变为白色,并且td的背景变为蓝色.但是,没有一个类似的问题似乎对我有帮助.表例如CSS更改父级悬停上的子元素字体颜色第一行: Account Hold ...
css居父容器下,整理：子容器垂直居中于父容器的方案
本文在evernote里有备份.如果evernote的阅读区域嫌窄了,那么可以把这个链接拖入书签并点击javascript:jQuery("#container").width(9 ...
JS 获取元素下指定的子元素
//获得li标签下的子元素divfunction GetLiChildDIV(liObj) {//获取li下的所有子元素var children = liObj.children;//遍历子元素,当元 ...
html怎么获取父元素下的所有子元素,javascript – 获取具有ID的父元素的子元素的子元素...
非jQuery解决方案 var span = document.getElementById('part1'); var row = span.getElementsByTagName('table' ...
[jeecms]获取父栏目下的子栏目名称
[@cms_channel_list parentId='父栏目id'] [#list tag_list as c] <a href="${c.url}">${c.na ...
获取一个目录下文件扩展名为txt或htm或html的文件的几种方法
方法1: 使用循环方法方法2:使用Lambda表达式 DirectoryInfo di = new DirectoryInfo(strPath); FileInfo[] fi = di.GetFil ...
html获取孩子节点,JS实现JQuery children()方法，获取某个元素下所有子元素节点或者某个元素下指定标签元素 – Fakin's Blog...
想必大家都知道jquery中有个children()是一个遍历的方法,作用是获取某个指定元素下所有子元素,那么今天我们来用原生JS实现一个这个children(),其实很简单,只不过需要处理一下IE6 ...

css获取父元素下第几个元素出坑和JQuery通过index()获取下标出坑方法

css获取父元素下第几个元素出坑和JQuery通过index()获取下标出坑方法相关推荐

最新文章

热门文章