Quel est le moyen le plus simple d'envelopper une div avec des frères et sœurs dans jQuery?

Question

Je veux utiliser jQuery pour développer dynamiquement mon balisage afin que mes divs apparaissent comme de belles boîtes arrondies.

Par exemple, si mon DOM a une série d'objets div avec des identifiants uniques comme:

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

peut être sélectionné à l'aide:

$(“.isequeue”) 

Je veux remplacer/envelopper ces divs afin que le résultat final ressemble à:

<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> 

le balisage supplémentaire pourrait être ajouté à la volée ou tout simplement caché dans la page d'origine afin qu'il puisse être sélectionné et copié.

Je suis sûr qu'il y a un moyen propre d'accomplir cela, mais il m'a échappé pour l'instant. jQuery.wrap() placera les objets sélectionnés dans la partie la plus interne de la source fournie, mais comment le faites-vous lorsque vous souhaitez que l'élément sélectionné soit un frère ou une sœur de la source nouvellement ajoutée.

Merci, Jim

Answer 1

Quelque chose comme cela pourrait fonctionner:

$(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 */); 
}); 

Il serait sage d'avoir juste le tous les trucs pré-faites et clone juste. Mais, vous pouvez également les avoir comme une chaîne et inséré de la même manière.

Answer 2

avant() et après() devraient fonctionner.