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很好，但我真的不知道该做什么或怎么做:)你的答案非常感谢。谢谢Sir / Mam：）

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>

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

1 个答案: