这里首先要区分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()获取下标出坑方法》对你有帮助,请点赞、收藏,并留下你的观点哦!