Question

首先参见jsfiddle

我必须转换源结构

<div class="out">
 <a>im here</a>
 <a>to save</a>
 <a>our</a>
 <a>country</a>
</div>

到

<div class="newout">
    <ul>
        <li class="haha">
            <a>im here</a>
            <span><a>im here</a></span>
        </li>
        <li class="haha">
            <a>to save</a>
            <span><a>to save</a></span>
        </li>
        <li class="haha">
            <a>our</a>
            <span><a>our</a></span>
        </li>
        <li class="haha">
            <a>country</a>
            <span><a>country</a></span>
        </li>
    </ul>
</div>

这意味着我必须执行以下程序：

1.clone a tag
2.用span标签
3.将其添加到之前的a代码
4.将之前的标签转换为li标签，然后添加课程
5.然后将所有先前的元素包装到ul标记

我不知道如何使用JQuery来实现STEP4。我不知道如何获取这些标签并添加包装。

非常感谢！

Answer 1

尝试

$(document).ready(function() {

    var $ct = $('.out').removeClass('out').addClass('newout');
    var $ul = $('<ul />').appendTo($ct);
    $ct.children('a').each(function(){
        var $this = $(this);
        $this.wrap('<li class="haha" />');
        $('<span />').append($this.clone()).insertAfter($this);
        $this.parent().appendTo($ul)
    })

});

演示：Fiddle

或者

$(document).ready(function () {    
    var $ct = $('.out').removeClass('out').addClass('newout');
    var $ul = $('<ul />').appendTo($ct);
    $ct.children('a').each(function () {
        var $this = $(this);
        $('<li />', {
            'class': 'haha'
        }).append(this).append($('<span />').append($this.clone())).appendTo($ul)
    })
});

演示：Fiddle

克隆后，JQuery将整个部分包装起来

1 个答案: