Деформация нескольких элементов в случайных уровнях

Question

Я немного застрял... Как я могу обернуть коллекцию элементов DOM на разных уровнях в объединенном div?

Вот пример:

<div id="item1">
    <div id="item2"></div>
    <div id="item3">
        <div id="item4"></div>
    </div>
    <div id="item5"></div>
</div>

например, Wrap #item2 и #item4 в #COMBO должны выглядеть так:

<div id="item1">
    <div id="COMBO">
        <div id="item2"></div>
        <div id="item3">
             <div id="item4"></div>
        </div>
    </div> 
    <div id="item5"></div>
</div>

или любые другие случайные селекторы, такие как #item1 и # item2 и #item4, должны выглядеть так:

<div id="COMBO">
     <div id="item1">
        <div id="item2"></div>
        <div id="item3">
             <div id="item4"></div>
        </div>
        <div id="item5"></div>
    </div> 
</div>

Мне нужно было бы иметь возможность выбрать несколько элементов, таких как $("#item2, #item4") или $("#item1, #item2, #item4"), и все промежуточные элементы должны быть включены в оболочку.

---

@LeGEC

Селектор:

$('#item2, #item5').myWrap();

Результат:

<div id="item1">
    <div id="COMBO">
        <div id="item2"></div>
        <div id="item3">
             <div id="item4"></div>
        </div>
        <div id="item5"></div>
    </div>
</div>

---

Этот пример должен прояснить:

Селектор:

$('#item4, #item5').myWrap();

Результат:

<div id="item1">
    <div id="item2"></div>
    <div id="COMBO">
        <div id="item3">
             <div id="item4"></div>
        </div>
        <div id="item5"></div>
    </div>
</div>

Answer 1

Используйте https://api.jquery.com/wrap/ для этого.

Например:

$('#item1').wrap('<div id="COMBO"></div>');

и другие способы.

Answer 2

Использование wrap а также wrapInner

 $( "#item1" ).wrapInner( "<div id='COMBO'></div>" );//for firstscenario

Первый сценарий Демо

$( "#item1" ).wrap( "<div id='COMBO'></div>" );//for second scenarion

Второй сценарий Демо

Answer 3

Первый вопрос: http://jsfiddle.net/aamir/MSdQ7/

Таким образом, вы можете использовать wrapAll, если хотите обернуть предоставленные селекторы в один элемент.

$('#item2, #item3').wrapAll('<div id="COMBO"></div>');

Второй вопрос: http://jsfiddle.net/aamir/MSdQ7/1/

Это обернет #item1 и все его содержимое в один элемент

$('#item1').wrap('<div id="COMBO"></div>')

Чтобы обернуть каждый элемент в отдельную комбинацию: http://jsfiddle.net/aamir/MSdQ7/3/

Это обернет каждый элемент в свой элемент

$('#item2, #item3, #item4').wrap('<div id="COMBO"></div>')

Посмотрите на все это: https://api.jquery.com/?s=wrap

Answer 4

Тебе придется:

• искать ближайшего общего предка,
• выберите соответствующих детей внутри этого предка,
• заверните этих детей в обертку.