使用 jQuery 过滤标签答案

【问题标题】：Filtering tags using jQuery使用 jQuery 过滤标签
【发布时间】：2011-09-08 09:15:30
【问题描述】：

我有以下 SVG：

<g>
    <rect id="1">
    <text id="2">
    <g>
        <path id="3">
    </g>
</g>

<text id="4">
<rect id="5">

使用 jQuery，我希望从集合中删除所有的“g”标签，保留其他所有内容（包括现在剥离的“g”标签中的标签）。

所以，我需要的 jQuery 集合看起来像这样：

<rect id="1">
<text id="2">
<path id="3">

<text id="4">
<rect id="5">

我尝试使用过滤器，但无济于事（它不保留剥离的“g”标签的子代）：

$result = $svgCollection.filter('*:not(g)');

我认为过滤器充当递归函数，但它似乎不起作用。也试过了：

$result = $svgCollection.filter('text, rect, path');

但没有快乐。有什么想法吗？

【问题讨论】：

【解决方案1】：

$('g').each(
    $(this).replaceWith($(this).contents())
});

或更短：

$('g').replaceWith(function() {
    return $(this).contents()
});

【讨论】：

【解决方案2】：

不知道这是否是一个好的解决方案，但是：

$("g").children().unwrap();

【讨论】：

【解决方案3】：

unwrap() 方法旨在实现您想要的：

$svgCollection.find("g > *").unwrap();

编辑：如果您不希望此操作影响 DOM，您可以克隆集合：

var $result = $svgCollection.clone().find("g > *").unwrap().end();

【讨论】：