jquery - 在 <div> 中创建一个 <div> 并在该 <div> 上附加一些内容创建 jQuery

Question

我正在定制一个插件，该插件有自己的 HTML 结构。我的问题是我想将这些内容放在一个 <div> 中.我会在我的代码之后解释更多。

这是插件的 HTML 代码:

<div class="section">
  <div class="panel">
    <h2>Test</h2>
    <div class="box">
      Content 1
    </div>
    <div class="box">
      Content 1
    </div>
    <div class="box">
      Content 1
    </div>
  </div>

  <div class="panel">
    <h2>Test 2</h2>
    <div class="box">
      Content 2
    </div>
    <div class="box">
      Content 2
    </div>
    <div class="box">
      Content 2
    </div>
  </div>

  <div class="panel">
    <h2>Test 3</h2>
    <div class="box">
      Content 3
    </div>
    <div class="box">
      Content 3
    </div>
    <div class="box">
      Content 3
    </div>
  </div>
</div>

这就是我想要的。我想要那些 .box放在一个<div> .

这是我想要的 HTML 代码:

<div class="section">
  <div class="panel">
    <h2>Test</h2>
    <div class="wrapper-box">
      <div class="box">
        Content 1
      </div>
      <div class="box">
        Content 1
      </div>
      <div class="box">
        Content 1
      </div>
    </div>
  </div>

  <div class="panel">
    <h2>Test 2</h2>
    <div class="wrapper-box">
      <div class="box">
        Content 2
      </div>
      <div class="box">
        Content 2
      </div>
      <div class="box">
        Content 2
      </div>
    </div>
  </div>

  <div class="panel">
    <h2>Test 3</h2>
    <div class="wrapper-box">
      <div class="box">
        Content 3
      </div>
      <div class="box">
        Content 3
      </div>
      <div class="box">
        Content 3
      </div>
    </div>
  </div>
</div>

那些.box元素被包裹在 .wrapper-box 中.我将如何使用 jQuery 做到这一点？我相信使用 append很好，但我真的不知道该做什么或怎么做 :) 非常感谢您的回答。谢谢先生/妈妈:)

Answer 1

您可以遍历每个 .panel 并使用 wrapAll()

$('.panel').each(function(){
    $(this).find('.box').wrapAll('<div class="wrapper-box" />')
});

$('.panel').each(function() {
  $(this).find('.box').wrapAll('<div class="wrapper-box" />')
})

.wrapper-box {
  border: 1px solid red;
  padding: 5px;
}
.box {
  border: 1px solid green;
  padding: 5px;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="section">
  <div class="panel">
    <h2>Test</h2>

    <div class="box">Content 1</div>
    <div class="box">Content 1</div>
    <div class="box">Content 1</div>
  </div>
  <div class="panel">
    <h2>Test 2</h2>

    <div class="box">Content 2</div>
    <div class="box">Content 2</div>
    <div class="box">Content 2</div>
  </div>
  <div class="panel">
    <h2>Test 3</h2>

    <div class="box">Content 3</div>
    <div class="box">Content 3</div>
    <div class="box">Content 3</div>
  </div>
</div>