Wrapping nested
with incrementing ids around elements in jQuery

Question

I am just learning jQuery and came across a problem that stumped me. I need to move, add & name divs with out affecting the content.

I have a single fixed width WRAPPER div with SECTION divs inside. This is what it looks like:

<body>
<div id="whitewrap">

    <div id="wrapper-1" class="wrapper">
        <div class="clearfix">

            <section id="block-1">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-1 -->

            <section id="block-2">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-2 -->

            <section id="block-3">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-3 -->

        </div><!-- .clearfix -->
    </div><!-- #wrapper-1 -->

</div><!-- #whitewrap -->
</body>

What I need is each SECTION to have it's own WRAPPER div plus add a CONTAINER div around each wrapper. The ID # for WRAPPERS and CONTAINERS need to auto increase because the SECTIONS are dynamically added.

This is what I imagine.

<body>
<div id="whitewrap">

    <div id="container-1">
        <div id="wrapper-1" class="wrapper">
            <div class="clearfix">

            <section id="block-1">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-1 -->

            </div><!-- .clearfix -->
        </div><!-- #wrapper-1 -->
    </div><!--#container-1 -->

    <div id="container-2">
        <div id="wrapper-2" class="wrapper">
            <div class="clearfix">

            <section id="block-2">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-2 -->

            </div><!-- .clearfix -->
        </div><!-- #wrapper-2 -->
    </div><!--#container-2 -->

    <div id="container-3">
        <div id="wrapper-3" class="wrapper">
            <div class="clearfix">

            <section id="block-3">
            <h1>Title</h1>
            <p>Some wonderful content.</p>
            </section><!-- #block-3 -->

            </div><!-- .clearfix -->
        </div><!-- #wrapper-3 -->
    </div><!--#container-3 -->

</div><!-- #whitewrap -->
</body>

Thank you guys!

Michael Berkowski · Accepted Answer

Use jQuery's .wrap() function with an incrementing counter. Pass a function to .wrap() which builds an HTML snippet to surround each <section>, using the counter as needed in ids and incrementing it:

var counter = 1;
$('section').wrap(function() {
  // Make a string of the HTML which should wrap around each <section>
  var wrapper = '<div id="container-' + counter + '"><div id="wrapper-' + counter + '" class="wrapper"></div></div>';
  // Increment the counter
  counter++;
  // Return the string and it will be applied around each <section>
  return wrapper;
});

Here's a demo...

Note: You already have a <div id="wrapper-1" /> surrounding the whole thing. If that should be removed (which it ought to if you have another wrapper-1 around a <section>), use .unwrap() first:

$("div.clearfix").unwrap();
// Then run the rest of the code...

As in this demo...

Andrew Whitaker · Answer

wrap/unwrap is what you're looking for here. Specifically, the overload that supplies you an index parameter will be helpful:

$("#block-1").unwrap().unwrap();

$("section").wrap(function(i) {
    var num = i + 1;

    return "<div id='container-" + num + "'>" + 
        "<div id='wrapper-" + num + "' class='wrapper'>" + 
        "<div class='clearfix'></div></div></div>";
});

Example: http://jsfiddle.net/andrewwhitaker/NfuGz/1/

Wrapping nested <div> with incrementing ids around elements in jQuery

Tags:

javascript

html

jquery

Benwilstr

2 Answers

Michael Berkowski

Andrew Whitaker

Recent Activity

Donate For Us