Question

For example I have this code…

<div id="outerdiv">
    <!--other tags-->
    <div class="innerdiv">
        <!--other tags-->
        <fieldset>
            <!--other tags-->
            <!--one start-->
            <fieldset>
            <!--other tags-->
            </fieldset>
            <fieldset class="myclass">
            <!--other tags-->
            </fieldset>
            <!--one end-->
        </fieldset>

        <!--two start-->
        <fieldset>
        <!--other tags-->
        </fieldset>
        <fieldset class="myclass">
        <!--other tags-->
        </fieldset>
        <!--two end-->

        <!--two start-->
        <fieldset>
        <!--other tags-->
        </fieldset>
        <fieldset class="myclass">
        <!--other tags-->
        </fieldset>
        <!--two end-->

        <fieldset>
            <!--other tags-->
            <!--one start-->
            <fieldset>
            <!--other tags-->
            </fieldset>
            <fieldset class="myclass">
            <!--other tags-->
            </fieldset>
            <!--one end-->
        </fieldset>
    </div>
    <div class="innerdiv">
        <!--other tags-->
        <!--two start-->
        <fieldset>
        <!--other tags-->
        </fieldset>
        <fieldset class="myclass">
        <!--other tags-->
        </fieldset>
        <!--two end-->

        <fieldset>
            <!--other tags-->
            <!--one start-->
            <fieldset>
            <!--other tags-->
            </fieldset>
            <fieldset class="myclass">
            <!--other tags-->
            </fieldset>
            <!--one end-->
        </fieldset>

    </div>
</div>

As you can see one and two are exactly the same, however I want two to be encapsulated also by a fieldset. I can do this with jquery right?..but how?

Update

Updated code because there isn’t only two of them..hehe and there other tags

Answer 1

As you want to wrap two elements with one structure, you’re going to need to use .wrapAll. You can’t use .wrap because that wraps the HTML around each matched element, not around all of the matched elements. The first thing that came to my mind was this:

$("#firstFieldset").next().andSelf().wrapAll("<fieldset>");

Given the HTML:

<fieldset id="firstFieldset"></fieldset>
<fieldset class="myclass"></fieldset>

Here’s a working example (inspect the source of the output window). What it does is select the first fieldset, get the following sibling, add the original one back into the matched set of elements and wrap the entire matched set in a fieldset.

Update based on comments

var yourFieldset = $("#mydiv > fieldset:first").next();
yourFieldset.next().andSelf().wrapAll("<fieldset>");

The first line gets the first fieldset which is a direct child of #mydiv, then gets the next sibling which is the first fieldset of your second set.