http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 2938|回复: 2
打印 上一主题 下一主题

[Jquery] jQuery 给页面所有 ul 中 li 进行奇偶性样式突显

[复制链接]
跳转到指定楼层
楼主
发表于 2018-3-14 19:47:56 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
获取页面中所有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> ]





1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
沙发
 楼主| 发表于 2018-3-14 19:48:40 | 只看该作者
以上可以看出, :nth-child 是获取 一个list集合
eq 获取是单个的元素
板凳
 楼主| 发表于 2018-3-14 19:49:23 | 只看该作者
nth-child   索引从1 开始
eq从0开始进行计算
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-3-28 19:42

© 2014-2021

快速回复 返回顶部 返回列表