jQuery的包装上同一类的多个div元素

你好，我想使用jQuery包装集类元素的一个div，但不能找到解决jQuery的包装上同一类的多个div元素

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>

感谢您的帮助提前！

来源

2012-06-05 user1292738

您可以使用.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>

来源

2012-06-05 11:25:36 slash197

演示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()); 
});

来源

2012-06-05 11:26:38

这种方法动态地：http://jsfiddle.net/kQz4Z/11/ – h2ooooooo

@ h2ooooooo在这里你去http://jsfiddle.net/ZXb4Y/1/ :)）不错的一个！如果你愿意，可以将它设为你的答案，欢呼声。 –

伙计们，以及[矿动态]（http://stackoverflow.com/a/10896724/1249581）？ :) – VisioN

使用wrapAll（）方法

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

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

});

演示：http://jsfiddle.net/g9G85/

来源

2012-06-05 11:31:29 charlietfl

或者这里是很短的动力解决方案：

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

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

来源

2012-06-05 11:45:12 VisioN

应该指出，这个方法在它的当前形式必须使用子组合选择器（>），如图所示。如果不这样做，将会导致每个与某个className匹配的项目的div封装。（例如，在这种情况下，带有“third”类的div将被封装在带有“column”类的TWO div中）。 – Luke

你可以尝试白衣这样的：

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

来源

2012-06-05 13:02:26

jQuery的包装上同一类的多个div元素

回答

相关问题