jQuery如何實現獲取父元素下指定型別標籤的子元素集合

antzone發表於2017-03-28
jQuery型別

本章節介紹一下如何獲取指定父元素下指定型別標籤的集合。

由於jQuery實在是太方便了，當前應用非常的廣泛，下面就介紹一下如何利用jQuery實現此功能。

子元素分一級子元素和所有的後代子元素，當然還可以細分，下面就分別做一下介紹。

一.獲取一級指定型別的標籤集合:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  width:400px;
  height:30px;
  line-height:30px;
  list-style:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("#bt").click(function(){
    $("#show").text($("#box").children("div").length);
  })
})
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <ul>
      <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天。</li>
      <li>沒有任何人一開始就是高手，必須要努力奮鬥才行。</li>
      <li>每一天都是新的，要好好的珍惜時間。</li>
    </ul>
  </div>
  <p>螞蟻部落歡迎您,softwhy.com</p>
</div>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

通過children()方法可以獲取指定元素的一級子元素集合，並且可以對集合中的元素進行過濾。

children屬性可以參閱javascript children屬性的用法一章節。

二.獲取所有的後代元素:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  width:400px;
  height:30px;
  line-height:30px;
  list-style:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("#bt").click(function(){
    $("#show").text($("#box").find("div").length);
  })
})
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <ul>
      <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天。</li>
      <li>沒有任何人一開始就是高手，必須要努力奮鬥才行。</li>
      <li>每一天都是新的，要好好的珍惜時間。</li>
    </ul>
    <div>softwhy.com</div>
  </div>
  <p>螞蟻部落歡迎您,softwhy.com</p>
</div>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

find()方法可以獲取指定父元素下面的所有後代元素，並且可以對它們進行過濾。

find()方法可以參閱jQuery find()一章節。

相關文章