Question

有没有办法用Jquery替换它：

<ul class="sub-menu">
    <li><a href="#">Link</a></li>
</ul>

到此：

<div class="under">
    <p><a href="#">Link</a></p>
</ul>

父元素是：<ul id="menu">

Answer 1

您可以解包a元素，然后将其包装在新元素中：

$(".sub-menu").find("a").unwrap().unwrap().wrap("<div class='under'>").wrap("<p>");

对unwrap的两次调用删除了li，然后删除了ul，并且对wrap的两次调用添加了div和{{1} }}。请注意，我们必须首先打包p，然后打包div。

这是working example（在结果窗口中检查DOM以查看最终结果）。

请注意，我假设在第二个示例中，结束p意味着结束ul标记！

修改

您还可以将两个调用合并到div，这应该更快：

wrap

其他编辑

两次使用$(".sub-menu").find("a").unwrap().unwrap().wrap("<div class='under'><p></p></div>");对我来说似乎有些混乱。现在我有一点闲暇时间，我把一个简单的插件放在一起，允许你从目标元素中解开多个祖先元素。我称之为unwrapUntil, and you can find it on GitHub。它适用于任何数量的unwraps，在这种特定情况下使用它可能会有点极端，但它允许我们执行以下操作：

unwrap

Answer 2

你可以使用替换，但你需要建立html例如：

$('li').replaceWith('<p><a href="#">Link</a></p>');

JQuery Ref

Answer 3

var newdiv = $("<div></div>")
newdiv.addClass("under")
$(".sub-menu a").each(function(){
    newdiv.append("<p></p>").find("p:last").append(this)
})
$(".sub-menu").replaceWith(newdiv)

http://jsfiddle.net/QLkS5/

Jquery html标签替换

3 个答案: