技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

JQuery計(jì)算HTML元素子元素(child elements)

作者:admin    時(shí)間:2019-9-3 12:39:24    瀏覽:

如果你發(fā)現(xiàn)自己需要知道HTML元素有多少個(gè)子元素，那么你很幸運(yùn)，因?yàn)樗幸粋€(gè)jQuery函數(shù)。

實(shí)際上有幾種不同的方法可以做到這一點(diǎn)。

計(jì)算元素的所有子元素

第一個(gè)是非常簡(jiǎn)單和直接的，并且將計(jì)算元素的所有子元素，無(wú)論它是什么類(lèi)型的元素或其類(lèi)或id名稱(chēng)。要做到這一點(diǎn)，我們只需要使用.children()方法并將其與.length()方法鏈接起來(lái)，并將其應(yīng)用于我們想知道其子項(xiàng)總數(shù)的元素。 因此，例如，如果我們想知道ID為#main的div元素有多少個(gè)子元素，我們可以使用以下代碼段：

$("#main").children().length;

實(shí)例

<html>
<head>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
</br>
  <div id="main">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <div>div1</div>
    <div>div2</div>
  </div>
  <input type = "button" value = "Demo" id = "demo" />

<script type = "text/javascript">
$("#demo").on("click", function () {
  alert($('#main').children().length);
});
</script>

</body>
</html>

execcodegetcode

說(shuō)明

點(diǎn)擊demo按鈕，彈出窗口顯示id為main的div里的所有元素個(gè)數(shù)，這里是5個(gè)。

好的，這很容易。 但是如果你想要找到更具體的東西，比如<p>標(biāo)簽元素的子元素?cái)?shù)或<h1>標(biāo)簽，那么代碼會(huì)更復(fù)雜一些。

css設(shè)置元素的子元素樣式

你可能知道你可以像CSS選擇器一樣使用jQuery選擇器，因此，在CSS中，如果要選擇元素的直接子元素，則可以通過(guò)在父元素之后但在子元素之前使用>符號(hào)來(lái)實(shí)現(xiàn)。 例如，在CSS中，如果要選擇具有#main ID的任何div元素的子元素的p元素，則使用以下代碼：

div#main > p{
  //insert code here
}

實(shí)例

<html>
<head>

<style type="text/css" >
div#main > p
{
  width:100px;
  height:20px;
  margin-top:5px;
  background:blue;
}
</style>
</head>
<body>
</br>
<div id="main">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>div1</div>
<div>div2</div>
</div>

</body>
</html>

execcodegetcode

說(shuō)明

p標(biāo)簽的css樣式通過(guò)代碼div#main > p來(lái)設(shè)置。

jQuery計(jì)算特定子元素的個(gè)數(shù)

在jQuery中，它實(shí)際上幾乎是相同的原則。 要選擇元素的特定子元素，您的選擇器看起來(lái)幾乎與CSS中的相同（當(dāng)然，除了jQuery語(yǔ)法）。 從那里，您只需要將.length()方法應(yīng)用于您的選擇器以計(jì)算所有子項(xiàng)。 因此，如果您正在嘗試計(jì)算#main div的所有p元素子元素，那么您的jQuery代碼可能如下所示：

$("#main > p").length;

實(shí)例

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
</br>
<div id="main">
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <div>div1</div>
  <div>div2</div>
</div>
<input type = "button" value = "Demo" id = "demo" />
<script type = "text/javascript">
  $("#demo").on("click", function () {
    alert($("#main > p").length);
  });
</script>
</body>
</html>

execcodegetcode

說(shuō)明

點(diǎn)擊demo按鈕，jQuery計(jì)算#main div的所有p標(biāo)簽的子元素個(gè)數(shù)，這里是3個(gè)。

標(biāo)簽: JQuery  子元素  
x