通过jquery添加html标签

Question

我有以下的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。

Answer 1

您可以使用wrapAll来包装元素的子元素：

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

这是一个working example (查看Firebug/Developer tools中的输出以查看新的span)。

更新回顾了一下代码，我意识到您实际上只想将.parent的一些子项包装在新的span中。如果这是最终的超文本标记语言结构，那么可以通过向children提供选择器来实现

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

这是another example。

Answer 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);

Answer 3

为此，请尝试以下代码：

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

这将使它成为现实。