萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery查找父元素、子元素

jquery查找父元素、子元素

 對使用js或者jquery查找父元素、子元素比較混淆的朋友可以參考下本文,因為是個人總結,用起來會比較方便

使用js或者jquery查找父元素、子元素經常遇到。可是用起來總容易混淆,這裡統一總結了一下,以後用起來相信會方便好多    這裡jquery向上查找父元素 用到的方法:closest() parents() parent()    向下查找子元素 用到的方法:find() children()    js用的是 children[] 屬性    html代碼   代碼如下: <!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查找父元素子元素</title>      </head>  <body>      <div class="div1" id="div1" name="mydiv">  <p>段落1 查找父元素</p>  <table id="table1">    <tbody id="tbody1">  <tr>  <td id="mytd1">11closest()向上查找最近的元素(返回零個或一個元素的 jQuery 對象)</td>    </tr>    <tr id="mytr2">  <td id="mytd2">21parent()方法</td>  </tr>    <tr>  <td id="mytd3">31parent("選擇器")方法</td>  </tr>  </tbody>    </table>  </div>      <hr>    <div id="div2" style="border-bottom :5px;" name="mydiv">  <p>段落2 查找子元素</p>  <table id="table2">  <tbody>  <tr>  <td id="sectd1">查找table2的td find()方法</td>  </tr>  <tr id="sectr2">  <td id="sectd2">查找table2的td children()方法</td>  </tr>  <tr>  <td id="sectd3">js的children[]屬性來查找</td>  </tr>    </tbody>    <tbody>  <tr>  <td>tbody2222</td>  </tr>  </tbody>  </table>  </div>  </body>  </html>    js代碼:   代碼如下: <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>  <script>    $(function(){  /************ 查找父元素 *************/  //closest()方法  $("#mytd1").bind("click",function(){  //alert($(this).html());  alert($(this).closest("table").attr("id")); //table1而不是table0  //alert($(this).closest("table").html());  });    //parent()方法  $("#mytd2").bind("click",function(){  //alert($(this).html()); //$(this).html()是21 (this).attr("id")是mytd2  alert($(this).parent().parent().parent().attr("id"));  //.parent()是tr 第二個.parent是tbody。即使沒有tbody標簽,找到的也是tbody 第三個.parent()是table    //document.write("第一個parent的id:" + $(this).parent().attr("id") + "。 第二個parent的id是:"+$(this).parent().parent().attr("id") + "。 第三個parent的id是:"+$(this).parent().parent().parent().attr("id"));    });    //parent("選擇器") parents("選擇器")  $("#mytd3").bind("click",function(){  $("p").parent("#div1").css("background", "yellow");//這裡換成了p標簽。不知道為什麼用this找不到元素  //alert($(this).parent("#div").attr("id"));//undefined  alert($(this).parents("div").attr("id"));//div1 注意一個parent parents  });      /************ 查找子元素 *************/  //查找table2的td元素 find()  $("#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() 是 tbody children()是 tr children("td[id='sectd2']")是td  });      // js的 children[]  $("#sectd3").bind("click",function(){  var table = document.getElementById("table2");  alert(table.children[0].children[2].children[0].innerHTML);  //children[0] 是 tbody children[2]是 第三行的tr children[0]是td  });    });  </script>   
copyright © 萬盛學電腦網 all rights reserved