如何用不同的类名包装DIV标签？ [英] How to wrap DIV tags with different class names?

问题描述

重复：

如何添加父级元素到一组段落？

我重复了以下HTML块文件

I have the following HTML blocks repeated in the document

<!-- 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包装Divs来获取生成的HTML就像这样...

How can I wrap the Divs with jQuery to get the resulting HTML like this...

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

...

推荐答案

你很幸运，这正是 wrapAll 适用于：

You're in luck, that's exactly what wrapAll is for:

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

实例 | 来源

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

Your edit markedly changes the question. If you need to do the above only within some containing block, you can loop through the containing blocks and apply wrapAll only to their contents. You'll need a way to identify the way you want to group your divs, which you haven't specified in the question.

如果div有某种容器在他们周围，你可以这样做：

If the divs have some kind of container around them, you can do this:

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

在该示例中，我假设div位于类<$ c $的容器中c>阻止。

In that example, I've assumed the divs are within a container with the class "block".

实例

| 来源

如果没有结构方法来识别它们，那么你我必须以其他方式做到这一点。例如，我们在这里假设任何时候我们看到第一个，我们应该停止分组：

If there's no structural way to identify them, you'll have to do it some other way. For instance, here we do it by assuming any time we see a first, we should stop grouping:

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>');
}

实例 | 来源

这是因为 $ （）为您提供文档顺序中的元素，因此如果我们按顺序循环遍历它们，将它们保存起来，然后在我们看到新的<时将它们包起来。 code>第一个（当然，最后清理），你得到了预期的结果。

That works because $() gives you the elements in document order, so if we loop through them in order, saving them up, and then wrap up the previous ones whenever we see a new first (and of course, clean up at the end), you get the desired result.

或者这是另一种方式做同样的事情，不使用 wrapAll 。它依赖于第一个匹配的元素是第一个（所以在< c>之前没有第二个 code>第一个 s！）：

Or here's another way to do that same thing, which doesn't use wrapAll. It relies on the first matched element being a first (so no seconds before firsts!):

var current;

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

实例 | 来源

这篇关于如何用不同的类名包装DIV标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！