计算div内的div

时间:2011-08-23 10:18:01

标签: html count parent children

我已经尝试过这个页面上的解决方案来计算父(class)div中的div。但不幸的是,我的结果总是显示现有的所有儿童div。 如下所示,两个span标签都会输出7。

为了更好地解析这是代码html:缺少什么? - (我绝对是新手)。 日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>

2 个答案:

答案 0 :(得分:4)

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

问题是你的每一个,

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

这会选择容器中的所有.detail元素以及.box的所有子元素。这共7个。 您应该使用每个()进行.detail并对.box子项进行计数并修改相应的countDiv。

答案 1 :(得分:1)

我不知道为什么你要用相同的类名来计算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,你应该提供不同的类名。