计算div内的div

发布于 2024-11-30 20:18:22 字数 1932 浏览 1 评论 0原文

我已经尝试过此页面上的解决方案来计算父（类）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>

原文

i have tried the solutions on this page for counting divs inside parent (class) div. but unfortunately my result is alway displaying the whole number of existing children divs.
as the sample follows both of the span tags will output 7.

for better undersanding this is the code html: what is missing? - (i am absolutely greenhorn).
thnx.

    <!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丢了幸福的猪 2024-12-07 20:18:22

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

问题是你的每个，并且

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

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

回复收藏 0 原文

极度宠爱 2024-12-07 20:18:22

我不知道你为什么要尝试计算具有相同类名的 div。当您使用 $('.detail') 时，它将获取页面中类名为“detail”的所有元素，因此您无法计算与其他 div 具有相同名称的特定 div通过这种方式。

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

我认为可能是：

$('#content-body .detail').each(function() { 
      var n = $(this).children('.box').length;
      $(this).append("<div>There are " + n + " divs inside parent box detail.</div>");
});

如果你想计算特定的 div 你应该提供不同的类名。

I don't know why you are trying to count the divs with the same class name. When you are using $('.detail') it will get all the elements which have the class name "detail" in the page, so you cannot count the specific div with the same name with other divs by this way.

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

I think it could be:

$('#content-body .detail').each(function() { 
      var n = $(this).children('.box').length;
      $(this).append("<div>There are " + n + " divs inside parent box detail.</div>");
});

and if you want to count the specific div you should provide different class name.

回复收藏 0 原文

~没有更多了~