如何用不同的类名包装 DIV 标签？ [复制]

Question

重复：
How can I add a parent element to a group of paragraph?

我在文档中重复了以下 HTML 块

<!-- first block -->
<div class="first">
   My first div
</div>
<div class="second">
   My second div
</div>

<!-- second block -->
<div class="first">
   My first div
</div>
<div class="second">
   My second div
</div>

...

如何使用 jQuery 包装 Div 以获得这样的 HTML...

<!-- first block -->
<div class="container">
   <div class="first">
      My first div
   </div>    
   <div class="second">
      My second div
   </div>
</div>

<!-- second block -->
<div class="container">
   <div class="first">
      My first div
   </div>    
   <div class="second">
      My second div
   </div>
</div>

...

Answer 1

你很幸运，这正是wrapAll 的用途：

$(".first, .second").wrapAll('<div class="container"></div>');

Live Example | Source

---

您的编辑明显改变了问题。如果您只需要在 within 一些包含块中执行上述操作，则可以遍历包含块并将 wrapAll 仅应用于其内容。您需要一种方法来确定您想要对 div 进行分组的方式，而您没有在问题中指定。

如果 div 周围有某种容器，您可以这样做：

$(".block").each(function() {
  $(this).find(".first, .second").wrapAll('<div class="container"></div>');
});

在该示例中，我假设 div 位于类 "block" 的容器中。

Live Example | Source

如果没有识别它们的结构性方法，您将不得不以其他方式进行。例如，在这里我们假设任何时候看到first，我们都应该停止分组：

var current = $();

$(".first, .second").each(function() {
  var $this = $(this);
  if ($this.hasClass('first')) {
    doTheWrap(current);
    current = $();
  }
  current = current.add(this);
});
doTheWrap(current);

function doTheWrap(d) {
  d.wrapAll('<div class="container"></div>');
}

Live Example | Source

因为$() 为您提供文档顺序中的元素，所以如果我们按顺序循环它们，保存它们，然后每当我们看到一个新的@ 987654339@（当然，最后清理一下），你会得到想要的结果。

或者这是做同样事情的另一种方法，它不使用wrapAll。它依赖于 first 匹配的元素是 first（所以在 firsts 之前没有 seconds！）：

var current;

$(".first, .second").each(function() {
  var $this = $(this);
  if ($this.hasClass('first')) {
    current = $('<div class="container"></div>').insertBefore(this);
  }
  current.append(this);
});

Live Example | Source

Answer 2

$('div').wrapAll('<div class="container" />');

会这样做，但这也会包装任何其他 div，所以也许：

$('.first, .second').wrapAll('<div class="container" />'); 

更好。