jQuery owinąć wiele elementów div na tej samej klasy

Witam chciałbym użyć jQuery zawinąć zestawy elementów klasowych w div, ale nie może znaleźć rozwiązaniejQuery owinąć wiele elementów div na tej samej klasy

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>

pożądanego rezultatu:

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

Dzięki za pomoc z góry!

Źródło

2012-06-05 user1292738

Można użyć .wrap() zawinąć coś w div ale jeśli treść nie jest zamawiany stanie się bałagan, oto przykład:

Wejście

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

Wyjście

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

Źródło

2012-06-05 11:25:36 slash197

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

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

Dodany linia przerwy, tak że widać różnicę tutaj :) http://jsfiddle.net/kQz4Z/10/

kod metoda

$(function() { 

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

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

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




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

Źródło

2012-06-05 11:26:38

Ta metoda dynamicznie: http://jsfiddle.net/kQz4Z/11/ – h2ooooooo

@ h2ooooooo Tutaj idziesz http://jsfiddle.net/ZXb4Y/1/ :)) Nice one! ustaw jako odpowiedź, jeśli chcesz, okrzyki. –

Faceci, a co powiesz na [moje dynamiczne] (http://stackoverflow.com/a/10896724/1249581)? :) – VisioN

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

Źródło

2012-06-05 11:31:29 charlietfl

A tutaj jest bardzo krótki, dynamiczny rozwiązanie:

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

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

Źródło

2012-06-05 11:45:12 VisioN

Należy zauważyć, że ta metoda w obecnej formie MUSI wykorzystywać selektor kombinatora dziecięcego (>), jak pokazano. Niewykonanie tej czynności spowoduje zawijanie div dla każdego elementu, który pasuje do określonej nazwy klasy. (Na przykład w tym przypadku divy z klasą "third" będą zawijane w DWÓCH div z klasą "kolumna"). – Luke

można spróbować odrobina to:

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

Oto przykład:

JSFIDDLE

Źródło

2012-06-05 13:02:26

jQuery owinąć wiele elementów div na tej samej klasy

Odpowiedz

Powiązane problemy