2012-01-03 19 views
36

enter image description herejQuery clone div i dołączyć go po określonej div

Hi guys, z obrazka powyżej, chcę sklonować div z ID # car2 i dołączyć go po ostatnim div z id zacząć z samochodu, w tym przykład id # car5. Jak mogę to zrobić? Dzięki.

To jest mój kod try:

$("div[id^='car']:last").after('put the clone div here'); 

Odpowiedz

104

Można użyć klon, a następnie ponieważ każdy div ma klasę car_well można użyć insertAfter wstawić po ostatni div.

$("#car2").clone().insertAfter("div.car_well:last"); 
+0

I Próbuję użyć tego samego, aby dodać wiele załączników do formularza. Czy możesz wyjaśnić, jak usunąć ten div z funkcją neutralną (tak właściwie, będę miał 1 funkcję dodawania div, a drugi, aby usunąć ostatni div) –

+0

To działa dobrze, ale html() z anonimową funkcją jest potencjalnie potężniejszy , w zależności od zastosowania. https://stackoverflow.com/questions/8707756/jquery-clone-div-and-append-it-after-specific-div#answer-47063071 – plaidcorp

8

to wypróbować

$("div[id^='car']:last").after($('#car2').clone()); 
+0

lubię go - http : //jsfiddle.net/VgwKt/ – mrtsherman

+0

A jak zwiększyć numer ID do samochodu 6 po klonowaniu? – Mikeys4u

+0

@ Mikeys4u Nie byłem pewien co mam na myśli, znalazłem ten wątek na ten sam temat http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id – mcgrailm

0

Działa to świetnie, gdy jest prosta kopia. Jeśli sytuacja wymaga tworzenia nowych obiektów z szablonów, zwykle zawinąć div szablonu w ukrytej pamięci div i używać HTML jQuery() w połączeniu z klonu() stosując następujące techniki:

<style> 
#element-storage { 
    display: none; 
    top: 0; 
    right: 0; 
    position: fixed; 
    width: 0; 
    height: 0; 
} 
</style> 

<script> 
$("#new-div").append($("#template").clone().html(function(index, oldHTML){ 
    // .. code to modify template, e.g. below: 
    var newHTML = ""; 
    newHTML = oldHTML.replace("[firstname]", "Tom"); 
    newHTML = newHTML.replace("[lastname]", "Smith"); 
    // newHTML = newHTML.replace(/[Example Replace String]/g, "Replacement"); // regex for global replace 
    return newHTML; 
})); 
</script> 

<div id="element-storage"> 
    <div id="template"> 
    <p>Hello [firstname] [lastname]</p> 
    </div> 
</div> 

<div id="new-div"> 

</div>