The example in this article describes jquery: Nth-child selector usage. Share to everyone for your reference. The specific analysis is as follows:
This selector matches the nth child or parity element under its parent element.
: The EQ (index) selector matches only one element, and: The nth-child selector matches child elements for each parent element.
: Nth-child starting from 1, and: Eq () is starting from 0.
syntax Structure:
Copy Code code as follows:
This selector is typically used in conjunction with other selectors, such as class selectors, element selectors, and so on. For example:
Copy Code code as follows:
$ ("Li:nth-child (2)"). CSS ("Color", "blue")
The above code can set the font color in the second LI element under the parent element to blue. You can also compute the odd and even child elements of a parent element. For example:
Copy Code code as follows:
$ ("Li:nth-child (even)"). CSS ("Color", "blue")
The above code sets the font color to blue in an even-ordered LI element under the parent element.
Note: here it is necessary to combine the above code to explain the concept. The parent element here is not Li, but the parent element of Li.
Many people mistakenly assume that the last element in the child element that matches the LI element.
Instance code:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>:nth-child Selector-cloud-Habitat Community </title>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("Li:nth-child (2)"). CSS ("Color", "blue")
})
})
</script>
<body>
<div>
<ul>
<li class= "Houtai" title= "asp" >asp tutorials </li>
<li class= "Houtai" title= "NET" >asp. NET Tutorials </li>
<li class= "Houtai" title= "PHP" >; PHP Tutorials </li>
</ul>
<ul>
<li class= "Qiantai" title= "html" >html tutorials </li>
<li class= "Qiantai" title= "div" >div+css tutorials </li>
<li class= "Qiantai" title= "jquery" >jquery tutorials </li>
<li class= "Qiantai" title= "JS" >javascript tutorials </li>
</ul>
</div>
<button> Click to view Effect </button>
</body>
I hope this article will help you with your jquery programming.