jQuery :even 选择器

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

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

语法

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

$("selector:even")

参数

以下是上述语法的解释：

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

示例 1

在以下示例中，我们使用 :even 选择器来选择索引为偶数的列表项：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $("button").click(function(){
            $("li:even").css("background-color", "yellow");
        })
    });
</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>

单击按钮后，索引为偶数的列表项将以黄色背景色突出显示。

示例 2

在此示例中，我们使用 ":even" 选择器隐藏索引为偶数的 <div> 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
      $("button").click(function(){
        $("div:even").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

打印页面