Home > Developer > JavaScript
Examples of hierarchical selector usage in JQuery
This document describes the usage of hierarchical selector in JQuery. Share it with you for your reference. The details are as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<! 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> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> level selector </title> <Script src = "jquery-1.6.2.min.js" type = "text/javascript"> </script> <Script type = "text/javascript"> $ (Function (){ // ------ 1. match all descendant elements under the given ancestor Element // (Contains child elements and child elements, which are extended all the time) Var $ divs = $ ("# main div "); For (var I = 0; I <$ divs. length; I ++ ){ Alert ($ divs. get (I). id ); } // ------ 2. match all child elements under the given parent element, only including direct child elements // (Child elements that do not contain child elements) Var $ divs =$ ("# main> div "); For (var I = 0; I <$ divs. length; I ++ ){ Alert ($ divs. get (I). id ); } // ----- 3. prev + next $ ("lable + input"): matches all next elements following prev. // Note: You can only go to the first one and it is next to each other. If it is not next to div1, it cannot be obtained. // ...... <1>. Example 1 Var $ divBrother = $ ("# div1 + div"); // use the # div1 ID selector to obtain only div2 Alert ($ divBrother. get (0). id ); // ...... <2>. Example 2 Var $ divBrothers = $ ("div + div "); // With the div tag selector, each adjacent div can obtain divSun1 (adjacent to divSun) and div2 (adjacent to div1) For (var I = 0; I <$ divBrothers. length; I ++ ){ Alert ($ divBrothers. get (I). id ); } // ----- 4. prev ~ Sibits // $ ("Form ~ Input "): matches all the siblings elements after the prev Element // Note: The matched element does not include this element, // And the siblings matches the elements of the prev peer, and the latter element is not matched. Var $ divBrothers = $ ("# main ~ Div "); For (var I = 0; I <$ divBrothers. length; I ++) {// obtain main1, main2, main3 Alert ($ divBrothers. get (I). id ); } } ); </Script> </Head> <Body> <Div id = "main"> <Div id = "div1" class = "myDiv"> I am div1 <Div id = "divSun"> I am a grandson div. <Div id = "divSunSun"> I am Sun Tzu's grandson div </div> </Div> <Div id = "divSun1"> I am a grandson div </div> </Div> <Div id = "div2" class = "myDiv"> I am div2 </div> </Div> <Div id = "main1"> </div> <Div id = "main2"> </div> <Input type = "button" value = "button"/> <Div id = "main3"> </div> </Body> </Html> |
I hope this article will help you with jQuery programming.
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
