jQuery quấn nhiều phần tử div trên cùng một lớp

Question

Xin chào tôi muốn sử dụng jQuery để quấn bộ các yếu tố lớp trong một div nhưng không thể tìm ra giải pháp

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> 

mong muốn kết quả:

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

Cảm ơn sự giúp đỡ của bạn trước!

Answer 1

Bạn có thể sử dụng .wrap() để quấn một cái gì đó trong một div nhưng nếu nội dung của bạn không được ra lệnh nó sẽ trở thành một mớ hỗn độn, sau đây là một ví dụ:

Input

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

Output

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

Answer 2

Demohttp://jsfiddle.net/kQz4Z/8/

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

Added một ngắt dòng để bạn có thể thấy sự khác biệt ở đây :) http://jsfiddle.net/kQz4Z/10/

đang

$(function() { 

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

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

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




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

Answer 3

Sử dụng phương pháp wrapAll()

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

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

}); 

Bản trình diễn: http://jsfiddle.net/g9G85/

Answer 4

Hoặc đây là giải pháp động lực rất ngắn:

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

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

Answer 5

Bạn có thể thử whit này:

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()); 

đây một ví dụ:

JSFIDDLE