Фильтрация тегов с использованием 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

Метод unwrap () был разработан для достижения именно того, что вы хотите:

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

РЕДАКТИРОВАТЬ: Если вы не хотите, чтобы эта операция влияла на DOM, вы можете клонировать коллекцию:

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

Answer 3

Не знаю, если это хорошее решение, но:

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