jQuery to add div wrapper to specified elements

Question

I have a CMS generated HTML block. I'd like to add some DIV wrappers to a specific set of elements.

<ul id="gform_fields_1">
    <li id="field_1_8" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_9" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_10" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_11" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_12" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_13" class="gfield">
        <!-- content -->
    </li>
    <li id="field_1_14" class="gfield">
        <!-- content -->
    </li>
</ul>

I would like to achieve the following pattern:

<ul id="gform_fields_1">
    <div class="wrap">
        <li id="field_1_8" class="gfield">
            <!-- content -->
        </li>
        <li id="field_1_9" class="gfield">
            <!-- content -->
        </li>
        <li id="field_1_10" class="gfield">
            <!-- content -->
        </li>
    </div>
    <div class="wrap">
        <li id="field_1_11" class="gfield">
            <!-- content -->
        </li>
    </div>
    <div class="wrap">
        <li id="field_1_12" class="gfield">
            <!-- content -->
        </li>
        <li id="field_1_13" class="gfield">
            <!-- content -->
        </li>
    </div>
</ul>

The wraps are for a specific group of elements, for example I'd need #field_1_8, #field_1_19 and #field_1_10 to be enclosed in a DIV, then #field_1_11 wrapped in a DIV, then the remainder. Point is, I'd like to specify the IDs, rather than base it on any logic, so to speak.

.wrap() seems like the way to go, to work something like this:

$('LIST ALL IDs').wrap('<div class="new" />');

Any hints much appreciated.

Thanks

Answer 1

Since jQuery's selectors syntax is pretty much like CSS, you could simply list your elements like so :

$('li#field_1_8, li#field_1_9, li#field_1_10').wrapAll('<div class="new" />')