获取页面中所有ul中的第( 2n + 1 )个子元素,此方法主要用在对页面li进行奇偶性添加样式
获取是是获取所有table中的第( 2n + 1 )个子td,然后给第2个td加上一个固定的样式,进行突出显示等。
在这个时候,就需要用到 jQuery的子元素选择器 :nth-child
使用方式如下:1. 获取 每个ul 中的 奇 li元素
html代码:
[HTML] 纯文本查看 复制代码 <ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery代码:
[C#] 纯文本查看 复制代码 $("ul li:nth-child(2n+1)")
输出结果:
[JavaScript] 纯文本查看 复制代码 [ <li>John</li>, <li>Brandon</li>, <li>Glen</li>, <li>Ralph</li> ]
2. 获取 每个ul 中的 第2个子li元素
html代码:
[HTML] 纯文本查看 复制代码 <ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery代码:
[C#] 纯文本查看 复制代码 $("ul li:nth-child(2)")
输出结果:
[JavaScript] 纯文本查看 复制代码 [ <li>Karl</li>, <li>Tane</li> ]
3. 获取所有ul中的第一个li子元素
html代码:
[HTML] 纯文本查看 复制代码 <ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery代码:
[JavaScript] 纯文本查看 复制代码 $("ul li:eq(1)")
输出结果:
[JavaScript] 纯文本查看 复制代码 [ <li>Karl</li> ]
|