Какой самый простой способ обернуть div с братьями и сестрами в jQuery?

Question

Я хочу использовать jQuery для динамического расширения моей разметки, чтобы мои дивы отображались как красивые округлые прямоугольники.

Например, если в моем DOM есть серия объектов div с уникальными идентификаторами, такими как:

<div id="queuediv0" class="isequeue" > </div>

Который можно выбрать с помощью:

$(“.isequeue”) 

Я хочу заменить / обернуть эти div так, чтобы конечный результат был похож на:

<div class="isequeue_wrapper">
    <div class="isequeue_wrapper_oc">
        <div class="isequeue_wrapper_dk" style="margin: 0 5px;"> </div>
        <div class="isequeue_wrapper_dk" style="margin: 0 3px;"> </div>
        <div class="isequeue_wrapper_dk" style="margin: 0 2px;"> </div>
        <div class="isequeue_wrapper_dk" style="margin: 0 1px;"> </div>
   </div>
    <p class="isequeue_header">
        Header text
    </p>
    <div class="isequeue_wrapper_ic">
        <div class="isequeue_wrapper_lt" style="margin: 0 5px;"> </div>
        <div class="isequeue_wrapper_lt" style="margin: 0 3px;"> </div>
        <div class="isequeue_wrapper_lt" style="margin: 0 2px;"> </div>
        <div class="isequeue_wrapper_lt" style="margin: 0 1px;"> </div>
    </div>
    <div id="queuediv0" class="isequeue" >
    </div>
     <div class="isequeue_wrapper_oc">
         <div class="isequeue_wrapper_dk" style="margin: 0 1px;"> </div>
         <div class="isequeue_wrapper_dk" style="margin: 0 2px;"> </div>
         <div class="isequeue_wrapper_dk" style="margin: 0 3px;"> </div>
         <div class="isequeue_wrapper_dk" style="margin: 0 5px;"> </div>
     </div>
</div>

Дополнительная разметка может быть добавлена ​​на лету или просто скрыта на исходной странице, чтобы ее можно было выбирать и копировать.

Я уверен, что для этого есть чистый способ, но пока он ускользает от меня. jQuery.wrap () поместит выбранные объекты во внутреннюю часть предоставленного источника, но как это сделать, если вы хотите, чтобы выбранный элемент был родственником вновь добавленного источника.

Спасибо, Jim

Answer 1

Примерно так может работать:

$(function() {
    var $isqueue = $('.isequeue');
    $isqueue.wrap('<div class="isequeue_wrapper"></div>');
    $isqueue.before(/* All the isequeue_wrapper_oc, isequeue_header, isequeue_wrapper_ic and  stuff */).after(/* All the isequeue_wrapper_ic stuff */);
});

Было бы разумно просто подготовить все эти материалы и затем просто их клонировать. Но вы также можете иметь их в виде строки и вставлять таким же образом.

Answer 2

до () и после () должно работать.