6

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!

4

3 回答 3

4

.wrap()使用带有递增计数器的 jQuery函数。传递一个函数，.wrap()该函数构建一个 HTML 片段来包围 each <section>，根据需要在 ids 中使用计数器并递增它：

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;
});

这是一个演示...

注意：您已经有了<div id="wrapper-1" />整个事物的周围环境。如果应该删除它（如果你wrapper-1在 a 周围有另一个应该删除它<section>），请.unwrap()首先使用：

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

正如在这个演示中......

于 2012-07-27T23:59:43.997 回答
1

wrap/unwrap是你在这里寻找的。具体来说，为您提供索引参数的重载将很有帮助：

$("#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>";
});

示例：http: //jsfiddle.net/andrewwhitaker/NfuGz/1/

于 2012-07-28T00:21:29.740 回答
0

查看wrap()和wrapAll()。要自动增加数字，您可以使用index()on 。each() section

无论如何，我会考虑重新考虑标签树，我不确定section包装在 many divs 中是否是语义上最正确的事情。也许article更适合？引用w3网站：

section 元素表示文档或应用程序的通用部分。在这种情况下，部分是内容的主题分组，通常带有标题。

于 2012-07-28T00:01:31.297 回答