文章/答案/技术大牛

发布

社区首页 >问答首页 >用递增ids围绕jQuery中的元素包装嵌套的<div>

问用递增ids围绕jQuery中的元素包装嵌套的<div>
EN

Stack Overflow用户

提问于 2012-07-28 07:54:31

回答 3查看 998关注 0票数 6

我刚开始学习jQuery，遇到了一个难住我的问题。我需要移动，添加和命名div而不影响内容。

我有一个固定宽度的包装器div，里面有部分div。它看起来是这样的：

<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>

我需要的是每个部分都有自己的包装器div，并在每个包装器周围添加一个容器div。包装器和容器的ID #需要自动增加，因为这些部分是动态添加的。

这就是我所想的。

<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>

谢谢你们！

javascript

jquery

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-07-28 08:21:30

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/

票数 1

Stack Overflow用户

发布于 2012-07-28 07:59:44

使用带有递增计数器的jQuery的.wrap()函数。将一个函数传递给.wrap()，该函数构建一个HTML代码片段来包围每个<section>，根据需要在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...

注意:您已经在整个过程中使用了一个<div id="wrapper-1" />。如果应该将其删除(如果<section>周围有另一个wrapper-1，则应该删除)，请首先使用.unwrap()：

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

As in this demo...

票数 4

Stack Overflow用户

发布于 2012-07-28 08:01:31

查看wrap()和wrapAll()。要自动递增该数字，可以使用each() section上的index()。

在任何情况下，我都会考虑重新考虑标签树，我不确定包装在许多div中的section是否在语义上是最正确的。也许article更适合？引用自网站：

部分元素表示文档或应用程序的通用部分。在此上下文中，部分是内容的主题分组，通常带有标题。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11697029

复制

相似问题

问用递增ids围绕jQuery中的元素包装嵌套的<div>
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用递增ids围绕jQuery中的元素包装嵌套的<div>EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用递增ids围绕jQuery中的元素包装嵌套的<div>
EN