jq匹配偶数行_jQuery中两种奇偶选择器的区别

原标题：jQuery中两种奇偶选择器的区别

jQuery中的选择器在选择元素的时候经常用到， 今天主要介绍jQuery中的奇偶选择器！

jquery中的奇偶选择器要用到CSS3伪类选择器：nth-child()

nth-child() 的用法

直接匹配元素 如 nth-child(number)

jquery :even选择器

选择每个相隔的(偶数)元素

:even 选择器选取每个带有偶数 index 值的元素(比如 2、4、6)。

index 值从 0 开始，所有第一个元素是偶数 (0)。

最常见的用法：与其他元素/选择器一起使用，来选择指定的组中偶数序号的元素

jquery :odd选择器

选择每个相隔的(奇数)元素

:odd选择器选取每个带有奇数 index 值的元素(比如 1、3、5)。

index 值从 0 开始，所有第一个元素是偶数 (0)。

最常见的用法：与其他元素/选择器一起使用，来选择指定的组中奇数序号的元素

下面用实例来看下两种奇偶选择器实现的区别：

显示的效果 要实现奇数行有背景色：

html:

css+jq:

当把:nth-child(odd)改成:odd:

效果如下 偶数行的加了背景

所以它们的区别在于：

$("#table tr:nth-child(odd)").toggleClass("c"); :nth-child(odd) 是从0开始索引 所以被选中的是奇数行

$("#table tr:odd").toggleClass("c"); :odd 是从1算起 所以被选中的是偶数行返回搜狐，查看更多

责任编辑：