计算div内的div

2024-04-24

我已经尝试过此页面上的解决方案来计算父(类)div 内的div。但不幸的是我的结果总是显示现有子 div 的总数。 因为示例中的两个 span 标签都将输出 7。

为了更好地理解,这是代码 html:缺少什么? -(我绝对是新手)。 谢谢。

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>count</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="content-body" class="clearfix">

        <!-- detail div no 1 = 3 items inside -->
            <span class="countDiv"></span> 
            <div class="detail">
                <div class="box">
                    Div item 1
                </div>
                <div class="box">
                    Div item 2
                </div>
                <div class="box">
                    Div item 3
                </div>
            </div>
            <br /><br />
            <!-- detail div no 1 = 4 items inside -->
            <span class="countDiv"></span> 
            <div class="detail">
                <div class="box">
                    Div item 1
                </div>
                <div class="box">
                    Div item 2
                </div>
                <div class="box">
                    Div item 3
                </div>
                <div class="box">
                    Div item 4
                </div>
            </div>

        </div>
    <script type="text/javascript">

        $('#content-body').each(function() { 
            var n = $('.detail').children('.box').length;
            $(".countDiv").text("There are " + n + " divs inside parent box detail.");
        });

    </script>
    </body>
</html>

检查这个小提琴:http://jsfiddle.net/geko/vXcgZ/ http://jsfiddle.net/geko/vXcgZ/

问题在于你的每一个,以及

$('.detail').children('.box').length

这将选择容器中的所有 .detail 元素以及带有 .box 的所有子元素。总共有 7 个。 您应该使用each() 遍历.detail 并对.box 子项进行计数并修改核心相应的countDiv。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

计算div内的div 的相关文章