Question

我对使用jquery选择器和SPAN函数感到困惑 - 需要一些帮助： - ）

在很大一部分HTML内容中，我想删除使用特定类（包括子标记）定义的所有 sorrunding 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环境中工作。

我的能力已经结束，并在这里寻求帮助： - ）

Answer 1

遵循之前答案的路径：

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

在这种情况下，这不会将其他内部孩子的内容与跨度区分开来：

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

并且将删除没有span子节点的MyClass跨度。这种情况：

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

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

如果您不想删除没有span的MyClass范围：

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

Answer 2

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

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

的 DEMO

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删除周围的双跨标记。怎么解决这个？

3 个答案: