подсчет div внутри div - PullRequest
Новая
       7

подсчет div внутри div

1 голос
/ 23 августа 2011

Я попробовал решения на этой странице для подсчета div внутри родительского (класса) div.но, к сожалению, мой результат всегда показывает общее количество существующих дочерних элементов.как следует из примера, оба тега span будут выводить 7.

для лучшего понимания, это код html: чего не хватает?- (Я абсолютно 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>

Ответы [ 2 ]

4 голосов
/ 23 августа 2011

Проверьте эту скрипку: http://jsfiddle.net/geko/vXcgZ/

Проблема у каждого, а

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

Это выбирает все элементы .detail в вашем контейнере и все дочерние элементы с .box. Что в общей сложности 7. Вы должны пройти через .detail с использованием each (), взять счетчик для дочерних элементов .box и изменить базовое значение countDiv.

1 голос
/ 23 августа 2011

Я не знаю, почему вы пытаетесь сосчитать 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, вы должны указать другое имя класса.

...