jquery查找父元素 子元素(个人总结)

使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多

html代码

 

[html]
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  2. <html>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
  5. <title>jquery查找父元素子元素</title>
  6. </head>
  7. <body>
  8. <div class=”div1″ id=”div1″ name=”mydiv”>
  9. <p>段落1 查找父元素</p>
  10. <table id=”table1″>
  11. <tbody id=”tbody1″>
  12.     <tr>
  13.         <td id=”mytd1″>11closest()向上查找最近的元素(返回零个或一个元素的 jQuery 对象)</td>
  14.     </tr>
  15.     <tr id=”mytr2″>
  16.         <td id=”mytd2″>21parent()方法</td>
  17.     </tr>
  18.     <tr>
  19.         <td id=”mytd3″>31parent(“选择器”)方法</td>
  20.     </tr>
  21. </tbody>
  22. </table>
  23. </div>
  24. <hr>
  25. <div id=”div2″ style=”border-bottom :5px;” name=”mydiv”>
  26. <p>段落2 查找子元素</p>
  27. <table  id=”table2″>
  28.     <tbody>
  29.         <tr>
  30.             <td id=”sectd1″>查找table2的td find()方法</td>
  31.         </tr>
  32.         <tr id=”sectr2″>
  33.             <td id=”sectd2″>查找table2的td children()方法</td>
  34.         </tr>
  35.         <tr>
  36.             <td id=”sectd3″>js的children[]属性来查找</td>
  37.         </tr>
  38.     </tbody>
  39.     <tbody>
  40.         <tr>
  41.             <td>tbody2222</td>
  42.         </tr>
  43.     </tbody>
  44. </table>
  45. </div>
  46. </body>
  47. </html>

js代码:

 

[javascript] 
  1. <script type=”text/javascript” src=”./js/jquery-1.7.2.js”></script>
  2. <script>
  3. $(function(){
  4.     /************       查找父元素         *************/
  5.     //closest()方法
  6.     $(“#mytd1”).bind(“click”,function(){
  7.         //alert($(this).html());
  8.         alert($(this).closest(“table”).attr(“id”));   //table1而不是table0
  9.         //alert($(this).closest(“table”).html());
  10.     });
  11.     //parent()方法
  12.     $(“#mytd2”).bind(“click”,function(){
  13.         //alert($(this).html());        //$(this).html()是21   (this).attr(“id”)是mytd2
  14.         alert($(this).parent().parent().parent().attr(“id”));
  15.        //.parent()是tr    第二个.parent是tbody。即使没有tbody标签,找到的也是tbody   第三个.parent()是table
  16.        //document.write(“第一个parent的id:” + $(this).parent().attr(“id”) + “。        第二个parent的id是:”+$(this).parent().parent().attr(“id”) + “。      第三个parent的id是:”+$(this).parent().parent().parent().attr(“id”));
  17.     });
  18.     //parent(“选择器”)   parents(“选择器”)
  19.     $(“#mytd3”).bind(“click”,function(){
  20.         $(“p”).parent(“#div1”).css(“background”, “yellow”);//这里换成了p标签。不知道为什么用this找不到元素
  21.         //alert($(this).parent(“#div”).attr(“id”));//undefined
  22.         alert($(this).parents(“div”).attr(“id”));//div1   注意一个parent parents
  23.     });
  24.     /************       查找子元素         *************/
  25.     //查找table2的td元素      find()
  26.     $(“#sectd1”).bind(“click”,function(){
  27.         alert($(“#table2”).find(“td”).length);
  28.         /* $(“#table2”).find(“td”).each(function(index,element){
  29.             alert($(element).text());
  30.         }); */
  31.     });
  32.     //children()
  33.     $(“#sectd2”).bind(“click”,function(){
  34.         var table = $(“#table2”);
  35.         alert($(“#table2”).children().children().children(“td[id=’sectd2′]”).html());
  36.         //children() 是 tbody      children()是 tr   children(“td[id=’sectd2′]”)是td
  37.     });
  38.   // js的 children[]
  39.     $(“#sectd3”).bind(“click”,function(){
  40.         var table = document.getElementById(“table2”);
  41.         alert(table.children[0].children[2].children[0].innerHTML);
  42.         //children[0] 是 tbody      children[2]是 第三行的tr   children[0]是td
  43.     });
  44. });
  45. </script>

 

 

这里jquery向上查找父元素 用到的方法:closest()    parents()    parent()

 

向下查找子元素 用到的方法:find()    children()

js用的是 children[]    属性

标签