使用 jQuery 删除周围的双跨度标签。如何解决这个问题？

Question

我对 SPAN 的 jquery selector 和函数的使用感到困惑 - 需要一些帮助:-)

在一大块 HTML-content 中，我想删除 all sorruning SPAN tags defined with a specific class (including the child tag ), 但保持内部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 的其余位置。

所以我真正想要的是 select 每个 span.MyClass span 的内容，并在 HTML 内容中各自的位置输出纯文本。

我看过 unwrap()，但还没有按预期工作。

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

我力所能及，在这里寻求帮助:-)

Answer 1

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

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

DEMO

Answer 2

按照之前答案的路径：

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

这不会把除了span之外的其他inside children的内容，在这种情况下：

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

并且将删除没有 span child 的 MyClass span。本案：

<span class="MyClass">An explaination:</span>

https://jsfiddle.net/vov36trq/4/

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

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

Answer 3

你知道 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

使用 jQuery 删除周围的双跨度标签。如何解决这个问题？

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

javascript

jquery

jquery-selectors