使用jQuery过滤标签

Question

我有以下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');

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

Answer 1

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

或更短：

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

Answer 2

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

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

Answer 3

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

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

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

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