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の関数を使用します。IDで必要に応じてカウンターを使用し、それをインクリメントして、.wrap()それぞれを囲むHTMLスニペットを構築する関数を渡します。<section>

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周りに別のものがある場合は削除する必要があります<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多くのsにラップされているdivことが最も意味的に正しいことであるかどうかはわかりません。たぶんarticleもっとよく合う？w3サイトからの引用：

section要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。このコンテキストでは、セクションはコンテンツのテーマ別グループであり、通常は見出しが付いています。

于 2012-07-28T00:01:31.297 に答える