先看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
标签中,并添加class - 5.然后将之前的所有元素包装到
ul
标签
我不知道如何使用JQuery来实现STEP4。我不知道如何获取这些标签并添加包装。
非常感谢!
最佳答案
尝试
$(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
关于javascript - JQuery 在克隆后包裹整个部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19312404/