Home >Web Front-end >JS Tutorial >Detailed explanation of the application of jquery:odd selector

Detailed explanation of the application of jquery:odd selector

黄舟Original: 2017-06-23 09:44:171769browse

jQuery's:odd selector is used to match all index elements with an odd value, encapsulate them into jQuery objects and return them.

The opposite of this selector is the :even selector, which is used to match all elements with even index values.

Note: Since index values start counting from 0, elements at odd indexes are actually even elements in natural order.

This selector matches elements with odd index values, counting from 0.
Grammar structure:

$(":odd")

This selector is generally used in conjunction with other selectors, such as Class selector, Element selector, etc. For example:

$("li:odd)").css("color","green")

The above code sets the font color in the li with an odd index in the li element collection to green.
If it is not used with other selectors, it will be used with the * selector by default. $(": odd") is equivalent to $("*: odd")
Example code:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#btn").click(function(){ 
    $("li:odd").css("color","blue"); 
  }); 
}); 
</script>
</head>
<body>
<ul>
  <li>html专区</li>
  <li>div+css专区</li>
  <li>jQuery专区</li>
  <li>Javascript专区</li>
</ul>
<button id="btn">点击查看效果</button>
</body>
</html>

Return value

Returns the index in the DOM element that encapsulates the matching selector selector jQuery object for DOM elements with odd values.

If there are less than 2 elements matching the selector selector, an empty jQuery object is returned.

Example & Description

Take the following HTML code as an example:

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>
    <div id="n7">
        <ul id="n8">
            <li id="n9">item1</li>
            <li id="n10">item2</li>
        </ul>
    </div>
</div>

Now, we want to find div tags whose natural order is even (index value is odd) , you can write the following jQuery code:

// 选择了id为n2的一个元素
$("div:odd");

Then, find the li tags whose natural order is even (the index value is odd) among all ul tags, then you can write the following jQuery code:

// 选择了id分别为n5、n9的两个元素
$("ul li:odd");

Detailed explanation of the application of jquery:odd selector

The above is the detailed content of Detailed explanation of the application of jquery:odd selector. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to jQuery even selector (:even)Next article：Introduction to jQuery even selector (:even)

See more

Detailed explanation of the application of jquery:odd selector

Related articles