:odd 选择器| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

:odd 选择器

分类:选择器 > 基本筛选选择器 | 选择器 > jQuery扩展选择器

odd selector

描述:选择奇数元素,从0开始排序。参见even

加入于: 1.0
jQuery( ":odd" )

特别需要注意,从0开始的索引意味着,反直觉地,:odd选择了第二个元素、第四个元素……在匹配的集合中依此类推。

其它说明

  • 因为:odd是一个jQuery扩展,不是CSS规范文档的一部分,所以用:even查询,不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。要想在使用:odd选择元素时获得最佳性能,请先使用一个纯CSS选择器选择元素,然后使用.filter(":odd")作筛选。
  • 选中的元素以它在document中出现的顺序。

示例

查找偶数表格行,匹配第二行、第四行、依此类推(索引号为1、3、4等等)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>odd demo</title>
  <style>
  table {
    background: #f3f7f5;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>Row with Index #0</td></tr>
  <tr><td>Row with Index #1</td></tr>
  <tr><td>Row with Index #2</td></tr>
  <tr><td>Row with Index #3</td></tr>
</table>
 
<script>
$( "tr:odd" ).css( "background-color", "#bbbbff" );
</script>
 
</body>
</html>

演示结果

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/odd-selector.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。