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子元素过滤器