将具有相同类的多个div元素包装起来

Question

我想使用jQuery在一组类元素中包装一个

，但找不到解决方案。

HTML：

<div class="view-content">

  <div class="first">content</div>
  <div class="first">content</div>
  <div class="second">content</div>
  <div class="third">content</div>
  <div class="third">content</div>

</div>

期望结果：

<div class="view-content">

  <div class="column">
    <div class="first">content</div>
    <div class="first">content</div>
  </div>

  <div class="column">
    <div class="second">content</div>
  </div>

  <div class="column">
    <div class="third">content</div>
    <div class="third">content</div>
  </div>

</div>

- Matthias O.

Answer 1

演示 http://jsfiddle.net/kQz4Z/8/

API: http://api.jquery.com/wrapAll/

添加了一个换行符，以便您可以看到这里的区别 :) http://jsfiddle.net/kQz4Z/10/

代码

$(function() {

    $('.first').wrapAll('<div class="column" />')

    $('.second').wrapAll('<div class="column" />')

    $('.third').wrapAll('<div class="column" />')




    alert($('.view-content').html());
});​

- Tats_innit

---

@h2ooooooo，这是链接 http://jsfiddle.net/ZXb4Y/1/ ：））不错！如果你想的话，可以将其设置为你的答案，谢谢。 - Tats_innit

各位，我的动态怎么样？ :) - VisioN

@VisioN兄弟，你最近怎么样啊 :P 好的，也向你点个赞，伙计。 - Tats_innit

Answer 2

使用wrapAll()方法

$(function(){
    var classes = ['.first', '.second', '.third'];

    for (i = 0; i < classes.length; i++) {
        $(classes[i]).wrapAll('<div class="column">');
    }​

});

Demo: http://jsfiddle.net/g9G85/

- charlietfl

---

太好了！非常感谢你！ - crystallove18

Answer 3

下面是非常简短的动态解决方案：

​$(".view-content > div").each(function() {
    $(".view-content > ." + this.className).wrapAll("<div class='column' />");
});​

DEMO: http://jsfiddle.net/CqzWy/

- VisioN

---

需要注意的是，这种方法在当前形式下必须使用子级选择器（>）来实现。如果没有这样做，将会导致每个与特定className匹配的项目都被包裹在一个div中。（例如，在这种情况下，class为"third"的div将被包裹在两个class为"column"的div中）。 - Luke

Answer 4

你可以使用.wrap()将某些内容包装在一个div中，但如果你的内容没有顺序，它会变得混乱。这里是一个例子：

输入

<div class="view-content">
    <div class="first">content</div>
    <div class="second">content</div>
    <div class="first">content</div>
</div>

输出

<div class="view-content">
    <div class="column">
        <div class="first">content</div>
        <div class="column">
            <div class="second">content</div>
        </div>
        <div class="first">content</div>
    </div>
</div>

- slash197

Answer 5

你可以尝试这个：

你可以尝试这个：

var arr = $(".view-content div").map(function() { return $(this).attr('class'); }).get();
var results = $.unique(arr);
var i;

for(i = 0; i < results.length; i++){

    $('.out').append('<div class="columns"></div>');
    $('.'+results[i]).clone().appendTo('.columns:last');
}

alert($('.out').html());

这是一个例子：

JSFIDDLE

- Alex Ball