jquery實現的獲取指定元素指定型別元素數目

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

在某些需求下，可能要獲取指定元素下指定型別元素的數目，比如div元素下面連結a元素的數目。

下面就通過程式碼例項做一些介紹。

一.獲取所有指定型別子元素:

例項一:

獲取div下面的所有的連結a元素:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function(){
    $("#show").text($("#box a").length);
  })
})
</script> 
</head> 
<body> 
<div id="box">
  <a href="#">螞蟻部落一</a>
  <a href="#">螞蟻部落二</a>
  <p>
    <a href="#">螞蟻部落三</a>
    <a href="#">螞蟻部落四</a>
  </p>
</div>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

上面的程式碼可以獲取box元素下所有的連結a元素數目，不管是一級子元素還是子元素的子元素以此類推。

例項二:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function(){
    $("#show").text($("#box").find("a").length);
  })
})
</script> 
</head> 
<body> 
<div id="box">
  <a href="#">螞蟻部落一</a>
  <a href="#">螞蟻部落二</a>
  <p>
    <a href="#">螞蟻部落三</a>
    <a href="#">螞蟻部落四</a>
  </p>
</div>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

上面的程式碼同樣可以實現我們的要求。

關於find()函式可以參閱jQuery find()一章節。

二.獲取一級指定型別子元素:

例項一:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function(){
    $("#show").text($("#box > a").length);
  })
})
</script> 
</head> 
<body> 
<div id="box">
  <a href="#">螞蟻部落一</a>
  <a href="#">螞蟻部落二</a>
  <p>
    <a href="#">螞蟻部落三</a>
    <a href="#">螞蟻部落四</a>
  </p>
</div>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

上面的程式碼可以獲取box元素下的一級子元素a的數目。

例項二:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function(){
    $("#show").text($("#box").children("a").length);
  })
})
</script> 
</head> 
<body> 
<div id="box">
  <a href="#">螞蟻部落一</a>
  <a href="#">螞蟻部落二</a>
  <p>
    <a href="#">螞蟻部落三</a>
    <a href="#">螞蟻部落四</a>
  </p>
</div>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

上面的程式碼同樣實現了我們的要求。

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

相關文章