Obtaining method: 1. Use the eq() method to select the li element at the specified index position. The syntax is "$("li").eq(index number)"; 2. Use the ":eq()" selector to select Select the li element at the specified index position, the syntax is "$("li:eq(index number)")".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery gets the li number
1. Use the eq() method.
The eq() method returns the element with the specified index number of the selected element. Index numbers start with 0, so the index number of the first element is 0 (not 1).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li").eq(2).css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent node)
<li>First child element</li>
<li>Second child element</li>
<li>Third child element</li>
<li>The fourth child element</li>
<li>The fifth child element</li>
</ul>
</div>
<p>Select the third li element (index number is 2)</p>
</body>
</html> 
2. Use the ":eq()" selector
: The eq() selector selects elements with the specified index value. The index value starts from 0, and the index value of all first elements is 0 (not 1).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li:eq(1)").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent node)
<li>First child element</li>
<li>Second child element</li>
<li>Third child element</li>
<li>The fourth child element</li>
<li>The fifth child element</li>
</ul>
</div>
<p>Select the second li element (index number is 1)</p>
</body>
</html> 
[Recommended learning: jQuery video tutorial, web front-end video]
The above is the detailed content of jquery’s method of obtaining the first li. For more information, please pay attention to other related articles on the PHP Chinese website!
