Detailed explanation of the application of jquery:odd selector-JS Tutorial-php.cn

Detailed explanation of the application of jquery:odd selector

黄舟

Release： 2017-06-23 09:44:17

Original

1781 people have browsed it

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")

Copy after login

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

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

Copy after login

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>

Copy after login

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>

Copy after login

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");

Copy after login

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");

Copy after login

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!