Question

I want to use jQuery to dynamically expand my markup so that my divs show up as nice rounded boxes.

For example if my DOM has a series of div objects with unique ids like:

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

Which can be selected using:

$(“.isequeue”) 

I want to replace/wrap those divs so that the end result looks like:

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

The additional markup could be added on the fly or just hidden in the original page so that it can be selected and copied.

I’m sure there is a clean way to accomplish this, but it has eluded me for now. jQuery.wrap() will place the selected objects into the innermost part of the supplied source, but how do you accomplish this when you want the selected item to be a sibling of the newly added source.

Thanks,
Jim

Answer 1

Something like this could work:

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

It would be wise to just have the all the stuff pre-made and then just clone it. But, you could also have them as a string and inserted the same way.