Странная проблема вставки с jQuery

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

From:

<ul>
    <li>1</li>
    <li class="afterthis">2</li>
    <li>3</li>
    <li>4</li>
</ul>

To:

<ul>
    <li>1</li>
    <li class="afterthis">2</li>
</ul>
<h1>Title</h1>
<ul>
    <li>3</li>    
    <li>4</li>    
</ul>

я думал, что это легко сделать: $(".afterthis").after("</ul><h1>Title</h1><ul>");

но он не закрывает список, он перемещает конечный тег, он вставляет <h1>Title</h1><ul></ul>

чтобы увидеть проблему, см. этот jsfiddle http://jsfiddle.net/Fx74b/14/

4 голоса | спросил Gijs 20 Maypm11 2011, 12:16:16

2 ответа


0

Jquery работает только с допустимым HTML, а не со строковыми частями.

Таким образом, вы не можете передать сломанный html методу after().

Вам необходимо разделить ul себя и добавить другие элементы между ними.

$(document).ready(function() {
    var splitelement = $(".afterthis"); // find the element which will be used for the split
    var ul = splitelement.parent(); // find the relative ul
    var newul = $('<ul>'); // create the new ul that will follow the existing one

    newul.append( splitelement.nextAll() ); // move the rest of the li elements to the new ul
    ul.after("<h1>Title</h1>").next().after(newul); // insert the title and then then ul
});

демо http://jsfiddle.net/gaby/ph5UM/

ответил Gabriele Petrioli 20 Maypm11 2011, 12:24:01
0

Насколько я знаю, .after нужен аргумент, который является правильным текстом или объектом DOM.
$(</ul><h1>Title</h1><ul>) запускается из конечного тега, поэтому </ul> игнорируется. <ul> не завершено, чтобы jquery добавил конечный тег для <ul>

ответил Mayank 20 Maypm11 2011, 12:24:53

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

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132