Добавление html-тега через jquery

#jquery #insert

#jquery #вставить

Вопрос:

у меня есть следующий html

 <li class="cat-item cat-item-3 collapsable">
<div class="someclass"></div>
<a href="http://demo.mysite.com/category/parent-category-i/" title="View all posts filed under Parent Category I">
    Parent Category I
</a>
<ul class="children">
    <li class="cat-item cat-item-6">
        <a class="" href="http://demo.mysite.com/category/parent-category-i/child-category-i/" title="View all posts filed under Child Category I">
            Child Category I
        </a>
    </li>
    <li class="parent cat-item cat-item-7 collapsable lastCollapsable">
        <div class="someclass"></div>
        <a href="http://demo.mysite.com/category/parent-category-i/child-category-ii/" title="View all posts filed under Child Category II">
            Child Category II
        </a>
        <ul class="children">
            <li class="cat-item cat-item-9 last">
                <a href="http://demo.mysite.com/category/parent-category-i/child-category-ii/grandchild-category-i/" title="View all posts filed under Grandchild Category I">
                    Grandchild Category I
                </a> 
            </li>

используя вышеупомянутые html и jquery, как можно добавить

 <span class="folder">

после каждого класса li.parent и после каждого родительского тега привязки.
итак, наконец, приведенный выше html будет выглядеть так

 <li class="cat-item cat-item-3 collapsable">
<div class="someclass"></div>
<a href="http://demo.mysite.com/category/parent-category-i/" title="View all posts filed under Parent Category I">
    Parent Category I
</a>
<ul class="children">
    <li class="cat-item cat-item-6">
        <a class="" href="http://demo.mysite.com/category/parent-category-i/child-category-i/" title="View all posts filed under Child Category I">
            Child Category I
        </a>
    </li>
    <li class="parent cat-item cat-item-7 collapsable lastCollapsable">
        <span class="folder"> // <-------------------- Want this
            <div class="someclass"></div>
            <a href="http://demo.mysite.com/category/parent-category-i/child-category-ii/" title="View all posts filed under Child Category II">
                Child Category II
            </a>
        </span> // <------------------------ Closing span of what I Want
        <ul class="children">
            <li class="cat-item cat-item-9 last">
                <a href="http://demo.mysite.com/category/parent-category-i/child-category-ii/grandchild-category-i/" title="View all posts filed under Grandchild Category I">
                    Grandchild Category I
                </a> 
            </li>

это означает добавление класса span к каждому родительскому классу li и закрытие span в конце

Ответ №1:

Вы можете использовать wrapAll для переноса дочерних элементов элемента:

 $(".parent").children().wrapAll("<span class='folder' />");

Вот рабочий пример (проверьте вывод в Firebug / Developer tools, чтобы увидеть новый span ).

Обновление просмотрев код, я понял, что на самом деле вы хотите обернуть только некоторые дочерние элементы .parent в new span . Если это ваша окончательная структура HTML, то вы можете сделать это, предоставив селектор для children :

 $(".parent").children("div, a").wrapAll("<span class='folder' />");

Вот еще один пример.

1. спасибо за вашу поддержку, но все равно не удалось получить желаемое result.my окончательный код и результат показаны в демонстрационной ссылке, указанной ниже. был бы признателен, если бы вы могли копнуть немного больше

Ответ №2:

Это должно сделать это. Функция-оболочка не будет работать, потому что вы пытаетесь обернуть несколько элементов одновременно.

 var x  = $('.parent.cat-item-7').contents();
$('.parent.cat-item-7').empty();
$('.parent.cat-item-7').append('<span class="folder"></span>');

$('.parent.cat-item7 .folder').append(x);

1. Это обернет каждый дочерний элемент вместо всех дочерних элементов и будет дублировать текст: jsfiddle.net/hnwkb/1

2. @JamesAllardice Да, я заметил, что именно поэтому я его изменил 🙂 но все равно спасибо за предупреждение

3. почему я получаю неожиданный результат, который я не могу объяснить должным образом, не могли бы вы проверить здесь [ссылка] demo.mysimplewp.com/demo-collapsible-categories

Ответ №3:

Попробуйте приведенный ниже код для этого:

 $("<span class='folder' />").appendTo('.parent');

Это заставит это произойти.