У меня есть html-структура, как показано ниже:
<div class="address-container">
<div class="address">
AAAAA
</div>
<div class="address">
BBBBB
</div>
<div class="address">
CCCCC
</div>
.
.
.
</div>
Я хочу, чтобы он использовал jquery, когда он зацикливается на некоторый элемент, будет добавлен
"</div><div class='address'>"
Структура должна выглядеть так:
<div class="address-container">
<div class="address">
AAAAA
</div>
<div class="address">
BBBBB
</div>
*</div>*
*<div class="address-container">*
<div class="address">
CCCCC
</div>
</div>
Мой код выглядит так:
$('div.address').each(function(i, e){
var h = $(e).height();
total_height = total_height + h;
if(total_height >= 300){
$(e).after('</div><div class="address-container">');
total = 0;
}
});
Но выше код неожиданно производит подобное (он автоматически открывает div для закрытия div и закрывает div для открытого div class= "address-conntainer"):
<div class="address-container">
<div class="address">
AAAAA
</div>
<div class="address">
BBBBB
</div>
*<div></div>*
*<div class="address-container"></div>*
<div class="address">
CCCCC
</div>
</div>
Что случилось с моим кодом? Или у вас есть другое решение для создания html-структуры, которую я хотел? Любая помощь действительно оценена :)
Помните, что HTML-код анализируется в DOM-объекты. Это означает, что в этом случае:
<div id="d_outer" class="address-container">
<div class="address">
AAAAA
</div>
<div class="address">
BBBBB
</div>
<div class="address">
CCCCC
</div>
</div>
Объект #d_outer содержит три дочерних объекта. Чтобы преобразовать его в
<div id="d_outer" class="address-container">
<div class="address">
AAAAA
</div>
<div class="address">
BBBBB
</div>
</div>
<div id="d_outer2" class="address-container">
<div class="address">
CCCCC
</div>
</div>
вам нужно создать новый div-узел # d_outer2 и переместить последний дочерний элемент #d_outer внутри # d_outer2. Попробуйте что-то вроде этого:
$('#parentAddressContainer div.address').each(function(i, e){
var h = $(e).height();
total_height = total_height + h;
if(total_height >= 300){
$('#parentAddressContainer').append("<div class=\"address-container\"></div>")
$('#parentAddressContainer div.address-container:last-child').append($(e));
total_height = 0;
}
});
Вот JsFiddle.
Вы можете сделать это, создав новый элемент и удалив старый, как только документ будет готов.
Оригинальный HTML
<div class="address-container">
<div class="address">
AAAAA
</div>
<div class="address">
BBBBB
</div>
<div class="address">
CCCCC
</div>
</div>
JQuery
var $target = $('.address-container .address');
var $container = $('<div/>').addClass('address-container');
var $elem = $('<div/>').addClass('.address').html($target.eq(2).html());
$container.append($elem);
$('.address-container').after($container);
$target.eq(2).remove();