Home > Developer > JavaScript
How jquery sets sub-element class
There are 3 ul under class = "www111cnnet". Now we want to add class = "com" to the 5th li elements under each ul"
// Obtain the number of child elements under id = div1
$ ('# Div1'). children (). length;
// Obtain the number of span elements under id = div1
$ ('# Div1'). children ('span '). length;
Specific jQuery code:
$ (". Www111cnnet ul li: nth-child (5)"). addClass ("com ");
You have successfully added the class com to the 5th li in each ul.
Of course, you can also directly add the CSS code:
$ (". Www111cnnet ul li: nth-child (5)" ).css ({"padding-right": "5px "});
Nth-child: the abbreviation in English, n-th, which indicates the nth number, 1, 2, and 3 respectively. They use the first, second, and third words respectively, and start from 4 as the number word + th, such as 4th, 5th, and 6th
Obtain the first li in ul.
$ ("Ul li: first-child ")
Obtain the last li in ul.
$ ("Ul li: last-child ")
Example
| The Code is as follows: | |
| <Div class = "Bg01"> |
|
To obtain the above class = "Bold" element, write as follows:
| The Code is as follows: | |
| : $ (This). children ("ul"). children ("li: first-child" ).css ("color", "# FF6666 "); |
|
Supplement
Obtain the same level element:
1. next ([expr]):
Obtain the next sibling element of a specified Element (note that it is the next sibling element)
| The Code is as follows: | |
| <! DOCTYPE html> <Body> <Script> </Body> |
|
In this example, only the list item 4 background color turns red.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
