Home > Developer > JavaScript
It is common to use js or jquery to find parent and child elements. However, it is always confusing to use it. I have summarized it here. It will be easier to use it in the future.
Here, jquery looks up the method used by the parent element: closest () parents () parent ()
Find () children ()
Js uses the children [] attribute.
Html code
Copy codeThe Code is 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 searches for child elements of a parent element </title>
</Head>
<Body>
<Div class = "div1" id = "div1" name = "mydiv">
<P> section 1: Find the parent element </p>
<Table id = "table1">
<Tbody id = "tbody1">
<Tr>
<Td id = "mytd1"> 11 closest () lookup the nearest element (returns the jQuery object of zero or one element) </td>
</Tr>
<Tr id = "mytr2">
<Td id = "mytd2"> 21 parent () method </td>
</Tr>
<Tr>
<Td id = "mytd3"> 31 parent ("selector") method </td>
</Tr>
</Tbody>
</Table>
</Div>
<Hr>
<Div id = "div2" style = "border-bottom: 5px;" name = "mydiv">
<P> Section 2: Search for child elements </p>
<Table id = "table2">
<Tbody>
<Tr>
<Td id = "sectd1"> find the td find () method of table2 </td>
</Tr>
<Tr id = "sectr2">
<Td id = "sectd2"> Find the td children () method of table2 </td>
</Tr>
<Tr>
<Td id = "sectd3"> Search for the js children [] attribute </td>
</Tr>
</Tbody>
<Tbody>
<Tr>
<Td> tbody2222 </td>
</Tr>
</Tbody>
</Table>
</Div>
</Body>
</Html>
Js Code:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "./js/jquery-1.7.2.js"> </script>
<Script>
$ (Function (){
/************ Find the 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" example .html ());
});
// Parent () method
$ ("# Mytd2"). bind ("click", function (){
// Alert(((this).html (); // when (this).html () is 21 (this). attr ("id") is mytd2
Alert ($ (this). parent (). attr ("id "));
//. Parent () is tr's second. parent is tbody. Even if no tbody tag is found, the third tbody. parent () is table.
// Document. write ("id of the first parent:" + $ (this). parent (). attr ("id") + ". The second parent id is: "+ $ (this). parent (). parent (). attr (" id ") + ". The third parent id is: "+ $ (this). parent (). attr (" id "));
});
// Parent ("selector") parents ("selector ")
$ ("# Mytd3"). bind ("click", function (){
$ ("P"). parent ("# div1" ).css ("background", "yellow"); // The p tag is replaced here. I don't know why I cannot find the element with this.
// Alert ($ (this). parent ("# div"). attr ("id"); // undefined
Alert ($ (this). parents ("div"). attr ("id"); // div1 pay attention to a parent parents
});
/************ Search for sub-elements *************/
// Find () the td element of table 2 ()
$ ("# 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 ("td [id = 'ctd2 ']" pai.html ());
// Children () is tbody children () is tr children ("td [id = 'ctd2 ']") is td
});
// Js children []
$ ("# Sectd3"). 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 row 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
