WEB 教程
实践 示例
HTML 参考手册
CSS 参考手册
PHP 参考手册

如何使用 jQuery 获取 DIV 中的元素数量

主题:JavaScript / jQuery上一页|下一页

答案:使用 jQuery .length 属性

您可以简单地使用 jQuery .length 属性来查找 DIV 元素或任何其他元素中的元素数。 以下示例将在文档就绪事件中提醒具有类 .content<div> 元素中的段落数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Number of Paragraphs in a Div</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        var matched = $(".content p");
        alert("Number of paragraphs in content div = " + matched.length);
    });
</script>  
</head> 
<body>
    <div class="content">
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
        <p>This is another paragraph.</p>
        <div>This is just a block of text.</div>
        <p>This is one more paragraph.</p>
    </div>
</body>
</html>

但是,如果您想获取所有子元素的编号而不管它们的类型,只需使用通用选择器,即星号 (*),如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Number of Child Elements in a Div</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        var matched = $(".content *");
        alert("Number of elements in content div = " + matched.length);
    });
</script>  
</head> 
<body>
    <div class="content">
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
        <div>This is just a <em>block of text</em>.</div>
        <ul>
            <li>An item of an unordered list</li>
            <li>Another item of an unordered list</li>
        </ul>
    </div>
</body>
</html>

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答:

Advertisements