jQuery子元素过滤器

子元素过滤器其实与《jQuery过滤选择器之伪类选择器和内容选择器》介绍的也差不多，只不是过是对子元素进行操作的。下面给大家分享下一些子元素过滤器

:first-child
获取每个父元素的第一个子元素（元素集合）
$('li:first-child')

:last-child
获取每个父元素的最后一个子元素（元素集合）
$('li:last-child')

:only-child
获取只有一个子元素的元素（集合元素）
$('li:only-child')

:nth-child(odd/even/eq(index))
获取每个自定义乌子元素的元素（集合元素，索引值从1开始计算）
$('li:nth-child(odd)')   //获取每一个父元素里的奇数（index值）元素
$('li:nth-child(even)')   //获取每一个父元素里的偶数（index值）元素
$('li:nth-child(1)')   //获取每一个父元素里的第2个（index值）元素
如果以上还不能满足你的需求你还可以
$('li:nth-child(2n)')   //获取每一个父元素里的以2为倍数的（index值）元素
$('li:nth-child(3n)')   //获取每一个父元素里的以3为倍数的（index值）元素
$('li:nth-child(3n+1)')   //获取每一个父元素里的以3为倍数加1的（index值）元素
这里的参数是很灵活的。你可以根据自己的需要来设置

上面给大家介绍的这几过滤器它们的原理：
<ul class="ul-1">
 <li>A1</li>
 <li>B1</li>
 <li>C1</li>
</ul>
------------------------------------
<ul class="ul-2">
 <li>A2</li>
 <li>B2</li>
 <li>C2</li>
</ul>

我们以$('li:first-child')为例给大家分析下
首先程序会找到页面里的所有li，不管是ul-1里的还是ul-2里的。然后分别找到它们所在的父元素也就是ul-1，ul-2，然后再对ul-1，ul-2里的li进行筛选。
像这个$('li:first-child')就是获取两个ul（ul-1，ul-2）里的第一个li（内容为A1，A2的两个li）。
其它几个过滤器同样的道理

本文出自：云库网 - jQuery子元素过滤器

转载于:https://www.cnblogs.com/yunkus/p/4891866.html