我们如何使用 jquery 删除 span 标签而不丢失数据？答案

【问题标题】：How do we remove the span tag without lossing data using jquery?我们如何使用 jquery 删除 span 标签而不丢失数据？
【发布时间】：2011-11-02 16:41:28
【问题描述】：

我的菜单结构如下，

    <ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34" id="menu-item-34"><a href="http://localhost/artofsujata/testimonials/">
<span class="menu_left">&nbsp;</span> 
<span class="menu_center">Testimonials</span> 
<span class="menu_right">&nbsp;</span>
</a>
</li>   
</ul>

我需要在不丢失数据的情况下删除标签，并且我需要像下面这样的菜单结构，

    <ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34" id="menu-item-34"><a href="http://localhost/artofsujata/testimonials/">
&nbsp; 
Testimonials
&nbsp;
</a>
</li>   
</ul>

我怎样才能使用 jquery 做到这一点？..

【问题讨论】：

可能重复：stackoverflow.com/questions/2308366/…（jsFiddle 用这个问题展示了这种方法here。）

标签： jquery html

【解决方案1】：

读取所有标签，将数据存储在JS中的数组中，删除所有标签，然后将数据改写成你需要的格式？

【讨论】：

【解决方案2】：

这样就可以了：

$('ul li a').html($('ul li a').text());

使用$('ul li a').text()，您可以选择标签中的所有文本节点。使用$('ul li a').html()，您可以将所有选定的文本节点放入您的标签中。这会导致从那里剥离所有标签。

对于多个 LI，您可以使用这个：

$('ul.sub-menu > li.menu-item > a').each(function(){
  $(this).html($(this).text());
});

【讨论】：

+1。很好。但请将此用于多个 lis $('ul li a').each(function() {$(this).html($(this).text());});
@naveen 公平评论，如果您不介意，我会将您的意见添加到答案中。

【解决方案3】：

正如this earlier question 中所述，这应该可以解决问题：

$("span").contents().unwrap();

jsFiddle here。

显然，您可能希望在菜单中更精确地定位它，以避免删除页面上的其他跨度：

$(".sub-menu li span").contents().unwrap();

另一方面，我建议在 CSS 中更改跨度的样式可能更容易，具体取决于您的实际问题。

【讨论】：

不错的答案，我不知道您可以在文本节点上使用 unwrap()。 “我想我今天学到了一些东西” (c)Stan :)