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元素

回答

相關問題