jquery: Nth-child Selector Usage instance _jquery

Source: Internet
Author: User

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:
$ (": Nth-child")

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.