javascript - JQuery在克隆后包装整个部分

Question

先看jsfiddle

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.克隆a标签
• 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)
    })

});

演示：小提琴

或者

$(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)
    })
});

演示：小提琴