to use JS or jquery to find the parent element, child element more confusing friends can refer to this article, because it is personal summary, it will be more convenient to use
Using JS or jquery to find the parent element, child element is often encountered. But use up is always easy to confuse, here unify sum up a bit, later use up believe will be convenient many here jquery looks up the method that the parent element uses: closest () parents () parent () The method used to look down the child element: find () Children () JS uses the children[] property HTML code code as follows: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > <html > <head> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 > <title>jquery Lookup parent element child </title> </head> <body > <div class= "Div1" id= "Div1" name= "mydiv" > <p> paragraph 1 Find parent element </p> < Table id= "table1" > <tbody id= "tbody1" > <tr> <td id= "MYTD1" >11closest () Look up the nearest element (a JQuery object that returns 0 or one element) </td> </tr> <tr id= "mytr2" > <td id= "Mytd2" >21parent () method </td> </tr> <tr> <TD id= "Mytd3" >31parent ("selector") method </td> </tr> </tbody> </table > </div> <hr> <div id= "Div2" style= border-bottom:5px; "Name=" Mydiv "> <p> paragraph 2 find child elements </p> <table id=" table2 "> <tbody> <tr> <TD id= "SECTD1" > Finding table2 TD Find () method </td> </tr> <tr id= "SECTR2" > <TD id= "SECTD2" > Find table2 TD Children () method </td> </tr> <tr> <td id= "sectd3 ">js children[] property to find </td> </tr> </tbody> <tbody> <tr> <td>tbody2222</td> </tr> </tbody> </table> </div> </body> </html> JS code: Code as follows: <script type= "text/ JavaScript "src="./js/jquery-1.7.2.js ></script> <script> $ (function () { /************ Lookup parent Element *************/ //closest () method $ ("#mytd1"). Bind ("click", function () { //alert ($ (this). html ()); alert ($ (this). Closest ("table"). attr ("id");//table1 instead of TABLE0 //alert ($ (this). Closest ("table"). HTML ()); }); //parent () method $ ("#mytd2"). Bind ("click" , function () { //alert ($ (). HTML ());//$ (this). html () is (this). attr ("id") is mytd2 alert ($ (this). Parent (). Parent (). Parent (). attr ("id"); //.parent () is the second of tr. Parent is tbody. Even if there is no tbody tag, it is tbody third. Parent () is table //document.write ("First Parent ID:" + $ (This). Parent (). attr ("id ") +". The ID of the second parent is: +$ (this). Parent (). Parent (). attr ("id") + ". The ID of the third parent is: +$ (this). Parent (). Parent (). Parent (). attr ("id"); }); //parent ("selector") Parents ("selector") $ ("#mytd3"). Bind ("click", Function () { $ ("P"). Parent ("#div1"). CSS ("Background", "yellow" )//This is replaced with the P tag. I don't know why I can't find the element //alert ($ (this). Parent ("#div"). attr("id")); /undefined Alert ($ (this). Parents ("div"). attr ("id");//div1 note A parent parents }); /** Find child elements *************/ //Find table2 TD element found () $ ("#sectd1"). Bind ("click", Function () { alert ($ ("#table2"). Find ("TD"). Length); /* $ ("#table2"). Find ("TD"). each (function (index,element) { alert ($ ( Element). Text ()); }); */ }); //children () $ ("#sectd2"). Bind ("click", Function () { var table = $ ("#table2"); Alert ($ ("#table2"). Children (). Children (). Children ("td[id= ' Sectd2 ')"). html ()); //children () is tbody Children () is the td $ ("#sectd3") of the TR Children ("td[id= ' Sectd2 ')"; }) children[] /JS. bind (" Click, function () { var table = document.getElementById ("table2"); alert (table.children[0].children[2). children[0].innerhtml); //children[0] is tbody children[2] is the third line of TR children[0] is td }); }); </script> 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
