如何在jQuery中包含不同类名的DIV标签？ [英] How to wrap DIV tags with different class names in jQuery?

问题描述

可能重复：

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

我在文档中重复了以下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将Div这样的结果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在一个容器内，类为code>block。

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

实例< a> | 来源

如果没有结构的方式来识别它们，你不得不做一些其他的方式。例如，在这里，我们假设任何时候看到第一个，我们应该停止分组：

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

实例 | 来源

因为 $ （）给出了文档顺序中的元素，所以如果我们循环遍历它们，保存它们，然后在我们看到一个新的第一个（当然，在最后清理），你会得到所需的结果。

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 。它依赖于第一个匹配的元素是第一个（所以没有第二个 code> first 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);
});

实例 | 来源

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