Я хочу считать общие отделения в контейнере и переключить их видимость со структурой как это. Также обратите внимание, что 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 очень ценился бы.
Спасибо
попробуйте:
// 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;
});
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>');
}
и т. Д.
Чтобы захватить самый верхний контейнер, который вы могу сделать
$("#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>'
});