jQuery एक ही कक्षा पर एक से अधिक div तत्वों लपेट

Question

हैलो मैं 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> 

अग्रिम में आपकी सहायता के लिए धन्यवाद!

Answer 1

आप .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> 

Answer 2

डेमोhttp://jsfiddle.net/kQz4Z/8/

एपीआई: 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()); 
});​ 

Answer 3

उपयोग wrapAll() विधि

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

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

}); 

देख सकते हैं

डेमो: http://jsfiddle.net/g9G85/

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

डेमो:http://jsfiddle.net/CqzWy/

Answer 4

या यहाँ बहुत ही कम गतिशील समाधान है

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

Answer 5

आप कोशिश इस कण सकता है: