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这个类名的索引。如果不传就是相对于点击元素的父元素。