jquery добавить закрытый тег

У меня проблема с jquery. После многих тестов для меня нет простого решения.

Моя CMS возвращает мне этот код

<ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul>

Я хочу добавить после каждого класса = последний этот код

</ul><ul>

чтобы получить этот код

<ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul><ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul><ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul>

Я пробовал с jquery с этим кодом

$('.last').after('</ul><ul>')

но невозможно добавить этот текст. я получаю

<ul></ul>

и не

</ul><ul>

Можете ли вы дать мне решение для моей проблемы. Заранее спасибо ;)


jquery append
person Hugo    schedule 21.07.2011    source источник
comment
Возможно, этот пост поможет: stackoverflow.com/questions/1644668/   -  person shanabus    schedule 21.07.2011

Ответы (4)


arrow_upward
7
arrow_downward

Вы не можете разделить узел DOM таким образом, вам нужно добавить новый <ul></ul> и переместить в него соответствующие подузлы.

С другой стороны, рассматривали ли вы возможность вообще не разбивать список и вместо этого украшать .last так, чтобы он выглядел как разделитель (пустое место, чего, как я предполагаю, вы пытаетесь достичь)?

person Blindy    schedule 21.07.2011
comment
Спасибо за ответы. Я попробую с другим разделителем, но моя первая идея — не трогать код из моей CMS. - person Hugo; 21.07.2011
comment
Тогда идея разделителя должна быть лучше, чем разрушительное манипулирование DOM во время выполнения. У вас на руках будет хрупкий (обновления могут сломать его), неразлагаемый (отключение js разрушит ваш сайт) беспорядок на ваших руках. - person Blindy; 21.07.2011
comment
да. ты прав, будет лучше. Попробую сначала по работе в cms переписать вывод. - person Hugo; 21.07.2011

arrow_upward
0
arrow_downward

У меня нет времени кодировать это прямо сейчас, но я думаю, что вы могли бы использовать "detach":

http://api.jquery.com/detach/

Отсоедините элементы li, а затем добавьте их в новый список и продолжайте строить свои списки таким образом.

person Dave L.    schedule 21.07.2011

arrow_upward
0
arrow_downward

Попробуйте это (я предполагаю, что этот ul находится в каком-то контейнере, скажем, div.

var container = $("div");
var ul = $("<ul/>");
var lis = $("ul > li", container);
container.empty();
lis.each(function(){

   ul.append(this);
   if($(this).hasClass("last")){
     container.append(ul);
     ul = $("<ul/>");
   }
});
container.append(ul);
person ShankarSangoli    schedule 21.07.2011

arrow_upward
0
arrow_downward

Вид грубой силы, но попробуйте это:

var newUL = [$('<ul></ul>')];    

$('ul.className li').each(function(i, el) {
   newUL[newUL.length - 1].append($(el));
   if($(el).hasClass('last')) {
      newUL.push($('<ul></ul>'));
   }
});

Когда вы закончите, вы можете получить новый html, сказав:

$('#ulParent').empty.append(newUL.join(''));
person Mrchief    schedule 21.07.2011
comment
Спасибо, но сначала я попытаюсь изменить вывод из моей cms (drupal). Если это невозможно, я сохраняю ваше решение. - person Hugo; 21.07.2011