Вставить близкий div (</ div>) после элемента, используя jquery

0

У меня есть 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-структуры, которую я хотел? Любая помощь действительно оценена :)

  • 0
    Почему вы не можете просто изменить исходный код HTML?
Теги:

2 ответа

1

Помните, что 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.

0

Вы можете сделать это, создав новый элемент и удалив старый, как только документ будет готов.

Оригинальный 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();

Вот JsFiddle.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню