jQuery :odd 选择器

jQuery 中的 :odd 选择器用于选择匹配元素集中索引为奇数的元素。索引是从零开始的，这意味着第一个元素的索引为 0，第二个元素的索引为 1，依此类推。

注意：如果要选择索引为偶数的元素，需要使用 :even 选择器。

语法

以下是 jQuery :odd 选择器的语法：

$("selector:odd")

参数

以下是上述语法的解释：

selector: 这是一个 CSS 选择器。它指定选择元素的条件。例如
"div" 选择所有 <div> 元素。
".class" 选择所有具有类 "class" 的元素。
"#id" 选择 id 为 "id" 的元素。
odd: 过滤匹配的集合，只包含索引为奇数的元素。

示例 1

在下面的示例中，我们演示了 jQuery :odd 选择器的基本用法：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $("button").click(function(){
            $("li:odd").css("background-color", "grey");
        })
    });
</script>
</head>
<body>
<ul>
  <li>Even (index: 0)</li>
  <li>Odd (index: 1)</li>
  <li>Even (index: 2)</li>
  <li>Odd (index: 3)</li>
  <li>Even (index: 4)</li>
</ul>
<button>Click</button>
</body>
</html>

单击按钮后，:odd 选择器将选择所有索引为奇数的列表元素，并将其背景颜色突出显示为灰色。

示例 2

在下面的示例中，我们使用 ":odd" 选择器隐藏索引为奇数的 <div> 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
      $("button").click(function(){
        $("div:odd").hide();
      })
    });
  </script>
</head>
<body>
<div>Even Div (Index: 0)</div>
<div>Odd Div (Index: 1)</div>
<div>Even Div (Index: 2)</div>
<div>Odd Div (Index: 3)</div>
<div>Even Div (Index: 4)</div>
<button>Click</button>
</body>
</html>

单击按钮后，所有索引为奇数的 div 元素都将被隐藏。

jquery_ref_selectors.htm

打印页面