使用jquery獲取指定元素的子元素程式碼例項

admin發表於2017-03-20
jQuery

本章節通過程式碼例項介紹一下如何利用jquery獲取指定元素的子元素。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>　
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  var lis=$("#box").children();
  for(var index=0;index<lis.length;index++){
    $("#show").text($("#show").text()+$(lis[index]).text())
  }
})
</script> 
</head> 
<body>
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body> 
</html>

上面的程式碼可以獲取指定元素的下的所有子元素，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(document).ready(function(){})，文件結構完全載入完畢再去執行函式中的程式碼。2.var lis=$("#box").children()，獲取box元素下所有的一級子元素集合。

3.for(var index=0;index<lis.length;index++)，遍歷集合中的每一個元素。

4.$("#show").text($("#show").text()+$(lis[index]).text())，將集合中每一個元素的文字內容寫入show中。

二.相關閱讀:

1.children()函式可以參閱jQuery children()一章節。 

2.children()函式和find()的區別可以參閱children()函式和find()的區別是什麼一章節。

相關文章