Общие дочерние отделения количества в контейнере

Я хочу считать общие отделения в контейнере и переключить их видимость со структурой как это. Также обратите внимание, что div.content может также находиться в другом вложенном или даже вложенный - вложенные контейнеры. Вот почему я обрабатываю его с jQuery для добавления div.topmost для каждого самого верхнего родительского контейнера:

<div id="parent">
  <div class="counter">There are 3 div.contents inside the container below</div>
  <div class="container">
    <div class="content"> 1 </div>
    <div class="container"> <!--container inside container -->
      <div class="content"> 2 </div>
      <div class="content"> 3 </div>
    </div>
  </div>

  <div class="counter">There are 5 div.contents inside the container below</div>
  <div class="container">
    <div class="content"> 1 </div>
    <div class="content"> 2 </div>
    <div class="content"> 3 </div>
    <div class="content"> 4 </div>
    <div class="content"> 5 </div>
  </div>
</div>

И jQuery:

  // only grab the top most container
  $('#parent > .container').addClass('topmost');
    var topMost = $(".topmost");
    var totContent = topMost.children('.content').size();

    if (topMost.length > 0) {
      topMost.before('<div class="toggle">There are ' + totContent + ' div.contents inside the container below</div>');
    }

   topMost.hide();

  $('#parent > .counter').click(function() {
    $(this).next('.topmost').toggle();
    //alert(totContent);
     return false;
  });

Но я не могу заставить его работать для цикличного выполнения для каждого div.counter. Счетчик всегда показывает весь div.content. Так размещение каждой функции, как подозревают, является проблемой.

Любой hep очень ценился бы.

Спасибо

5
задан swan 21 April 2010 в 05:47
поделиться

3 ответа

попробуйте:

 // only grab the top most container
  $('#parent > .container').addClass('topmost');
    var topMost = $(".topmost");

    topMost.each(function(){
      var totContent = $(this).find('.content').size();

      if (totContent > 0) {
        $(this).before('<div class="toggle">There are ' + totContent + ' div.contents inside the container below</div>');
      }

   })

   topMost.hide();

  $('#parent > .counter').click(function() {
    $(this).next('.topmost').toggle();
    //alert(totContent);
     return false;
  });
5
ответ дан 14 December 2019 в 19:06
поделиться
var topmost = $('#parent > .container');
var totContent = topmost.find('.content').length;
if (topMost.length > 0) {
    topmost.before('<div class="toggle">There are ' + totContent + ' div.contents inside the container below</div>');
}

и т. Д.

0
ответ дан 14 December 2019 в 19:06
поделиться

Чтобы захватить самый верхний контейнер, который вы могу сделать

$("#parent > div.container").eq(0);

Я думаю, что следующее сделает это за вас

$('#parent > div.counter').click(function() {
    var container = $(this).next('div.container').toggle();
    var totContent = container.find("div.content").length;
    alert (totContent);
     return false;
  });

Edit

$("#parent > div.container").each(function(){
    var currentElem = $(this);
    var totContent = currentElem.find("div.content").length;
    currentElem.before('<div class="toggle">There are ' + totContent + ' div.contents inside the container below</div>'
});
0
ответ дан 14 December 2019 в 19:06
поделиться
Другие вопросы по тегам:

Похожие вопросы: