JQuery wrap divs with numbered classes

Question

This is somewhat tricky, assuming this scenario:

<div class='top'>

    <div id='page1' class='in'>
    Mickey
    </div>

    <div id='page2' class='in'>
    Donald
    </div>

</div>

I want to wrap the divs with the section class, numbering it level1, level2 etc resulting in this:

<div class='top'>

    <section class='level0'>

        <div id='page1' class='in'>
        Mickey
        </div>

    </section>

    <section class='level1'>

        <div id='page2' class='in'>
        Donald
        </div>

    </section>

</div>

Any clues? Thanks!

why is the extra is closed? Is by mistake or intentionally? – Siva Charan Nov 27 '11 at 16:39 — Siva Charan, Nov 27 '11 at 16:39

score 5 · Accepted Answer · answered Nov 27 '11 at 16:39

5

You can pass a function to wrap(), and it will be called with the index of the current element. That way, you don't even have to use each():

$("div.top div.in").wrap(function(index) {
    return $("<section>").addClass("level" + index);
});

answered Nov 27 '11 at 16:39

Frédéric Hamidi

258,201
41
486
479

Adding some CSS to micha's example to show it a little easier: http://jsfiddle.net/Bk9xM/3/ – Scoobler Nov 27 '11 at 16:48

JQuery wrap divs with numbered classes

1 Answers1