用jQuery删除周围的双span标签.如何解决这个问题

Remove surrounding double span tags with jQuery. How to solve this?

本文关键字：解决 问题 何解决 周围 删除 jQuery 标签 span      更新时间：2023-09-26

我对使用jquery选择器和span函数感到困惑-需要一些帮助:-)

在一大块html内容中，我想删除所有排序的SPAN标签，这些标签由特定的类定义(包括子标签)，，但保留内部SPAN的内容，因为它是(纯文本)。

下面是一个HTML内容的例子: 

 <div id="SaveInfo">
      <p>another content <span class="MyClass green">An expaination: <span>with a span</span></span> and more</p>
      <p>another content <span class="MyClass">An explaination: <span>Content in span</span></span> and more content</p>
      <!-- But NOT select this one (without .MyClass) -->
      <p>another content <span class="green">Content in span</span> and more content</p>
 </div>

输出应该是:
(删除一些特定的周围span)

 <div id="SaveInfo">
      <p>another content with a span and more</p>
      <p>another content Content in span and more content</p>
      <!-- But NOT removed this one (without .MyClass) -->
      <p>another content <span class="green">Content in span</span> and more content</p>
 </div>

内容在jquery循环中，如下所示:

result += 'HTML content from each loop from before';

然后我用这个:

   // set the content for further use
   jQuery('#SaveInfo').html(result);
   // removes instances of .RedClass from SaveInfo
   jQuery('#SaveInfo .RedClass').remove();

和它的所有内容删除不需要的div，但保留其余的。

现在我需要删除周围的span，但保留内部span的内容(作为文本)。

模式如下:

每个:

<span class="MyClass anotherclass">Info text <span>main content</span></span>

应该转换为:

main content

，并保持它在HTML其余部分的位置。

所以我实际上想要的是为每个span.MyClass span选择内容，并在HTML内容中各自的位置输出纯文本。

我已经看过unwrap()，但还没有得到工作的预期。

现在我在jQuery 1.7.1环境中工作。

我已经力不从心了，请求帮助:-)

从前面的答案开始:

$('.MyClass').replaceWith(function(){
  var text = $(this).children("span").text();
  if(text!="") return text;
  else $(this).remove();
})

这不会把其他内部子元素的内容放在span之外，在这个例子中:

<span class="MyClass">An explaination: <b>Content in span</b></span>

并将删除没有span子span的MyClass span。这种情况下:

<span class="MyClass">An explaination:</span>
https://jsfiddle.net/vov36trq/4/

如果你不想删除没有span的MyClass span:

$('.MyClass').replaceWith(function(){
  return $(this).children("span").text();
})

可以使用replaceWith(function)。这将遍历所有实例并单独处理它们

$('.MyClass').replaceWith(function(){
   return $(this).children().text();
});
演示

您知道MyClass是否只存在于嵌套的span元素的情况下吗?

因为您指定了jQuery 1.7。x，我选择不做这个假设因为其他解都不成立。我的版本遍历子span元素并替换父元素。如果子元素不存在，即使应用了MyClass，父元素上也不会有任何改变。

$("span.MyClass>span").each(function () {
    var childText = $(this).text();
    var parent = $(this).parent();
    $(parent).replaceWith(childText);
});

例子:JSFiddle

相关文章：