jQuery child element filter

##:only-childFind the li that is the only child element in ul:

Note:

1. :nth-child(index) starts from 1, and eq(index) starts from 0, that is to say $(" ul li:nth-child(0)").css("color","red") cannot obtain matching elements and can only start from 1, that is $("ul li:nth-child(1) ").css("color","red"), and eq(0) can be obtained, the same is to obtain the first child element

:nth-child(even) is to obtain the even number of child elements, That is, the second, fourth, sixth..., and :even starts from index 0, matching the second index, the fourth index..., that is, the first, the third, The fifth..., it seems that they all get an odd number of items, the same is true for :nth-child (odd) and :odd

2. :first-child matches the child elements of each parent class , and :first matches a child element, and the same goes for :last-child and last

3. only-child: matches an element that is the only child element in the parent element, that is, the current child element is The only element in the class matches!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        jQuery(function($){
            //  $("ul li:first-child").css("color","red");
            $("ul li:first").css("color","red");
            // $("ul li:last-child").css("color","red");
            // $("ul li:nth-child(even)").css("color","red");
            // $("ul li:odd").css("color","red");
        })
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <ul>
            <li>第一个元素</li>
            <li>第二个元素</li>
            <li>第三个元素</li>
            <li>第四个元素</li>
            <li>第五个元素</li>
            <li>第六个元素</li>
        </ul>
        <ul>
            <li>第一个元素</li>
            <li>第二个元素</li>
            <li>第三个元素</li>
            <li>第四个元素</li>
            <li>第五个元素</li>
            <li>第六个元素</li>
        </ul>
    </div>
</form>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <script> $(function(){ // 1选取父元素下索引值是偶数的子元素的索引值(索引值从1开始的) //找到当前元素的父元素，在找他下面的子元素 $("span.child:nth-child(even)").css("fontSize","30px"); //2选取父元素下,索引值是奇数的元素(索引值从1开始) $("span.child:nth-child(odd)").css("color","red"); //3匹配每个父元素下，索引值为xx的子元素,索引从1开始 $("span.child:nth-child(1)").css("color","blue"); //4匹配每个父元素的第一个子元素 $("span.child:first-child").css("fontSize","50px"); //5匹配每个父元素的第一个子元素 $("span.child:last-child").css("fontSize","50px"); }) </script> <body> <div class="parent"> <span class="child">1</span> <span class="child">2</span> <span class="child">3</span> <span class="child">4</span> <span class="child">5</span> </div> </body> </html>

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

Name	Description	Example
:nth -child(index/even/odd/equation)	Matches the Nth child or odd-even element under its parent element ':eq(index)' only matches one element, And this one will match child elements for every parent element. :nth-child starts from 1, and :eq() starts from 0! Can be used: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)	Find the second li in each ul: $("ul li: nth-child(2)")
:first-child	matches the first child element ':first' only Matches an element, and this selector will match a child element for each parent element	Find the first li in each ul: $("ul li:first-child ")
:last-child	matches the last child element ':last'matches only one element, and this selection The symbol will match a child element for each parent element	Find the last li in each ul: $("ul li:last- child")
	If an element is the only child element of the parent element, it will be matched If the parent element contains other elements, it will not be matched.	$("ul li:only-child")

jQuery child element filter

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]