技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

JQuery计算HTML元素子元素(child elements)

作者:admin    时间:2019-9-3 12:39:24    浏览:

如果你发现自己需要知道HTML元素有多少个子元素,那么你很幸运,因为它有一个jQuery函数。

实际上有几种不同的方法可以做到这一点。

计算元素的所有子元素

第一个是非常简单和直接的,并且将计算元素的所有子元素,无论它是什么类型的元素或其类或id名称。要做到这一点,我们只需要使用.children()方法并将其与.length()方法链接起来,并将其应用于我们想知道其子项总数的元素。 因此,例如,如果我们想知道ID为#main的div元素有多少个子元素,我们可以使用以下代码段:

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

实例

<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

说明

点击demo按钮,弹出窗口显示id为main的div里的所有元素个数,这里是5个。

好的,这很容易。 但是如果你想要找到更具体的东西,比如<p>标签元素的子元素数或<h1>标签,那么代码会更复杂一些。

css设置元素的子元素样式

你可能知道你可以像CSS选择器一样使用jQuery选择器,因此,在CSS中,如果要选择元素的直接子元素,则可以通过在父元素之后但在子元素之前使用>符号来实现。 例如,在CSS中,如果要选择具有#main ID的任何div元素的子元素的p元素,则使用以下代码:

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

实例

<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

说明

p标签的css样式通过代码div#main > p来设置。

jQuery计算特定子元素的个数

在jQuery中,它实际上几乎是相同的原则。 要选择元素的特定子元素,您的选择器看起来几乎与CSS中的相同(当然,除了jQuery语法)。 从那里,您只需要将.length()方法应用于您的选择器以计算所有子项。 因此,如果您正在尝试计算#main div的所有p元素子元素,那么您的jQuery代码可能如下所示:

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

实例

<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

说明

点击demo按钮,jQuery计算#main div的所有p标签的子元素个数,这里是3个。

标签: JQuery  子元素  
  • IT热文
  • 站长推荐