jQuery verschieben von div-Inhalt statt Klon

Den code, den ich verwende jetzt nur noch die Klone ".comment_post" div-Element und fügt das Formular unter dem Kommentar.

Was ich machen möchte (wenn möglich) zu "bewegen" das ".comment_post" div, um den neuen Speicherort, anstatt Klonen.

Irgendwelche Vorschläge, wie ich dies tun kann?

HTML -

<div class="comment-post">
<form id="addCommentForm" method="post" action="">
<div class="avatar"><img src="http://www.gravatar.com/avatar/ee61e6c16/?s=36&r=g&d=mm" /></div>
<textarea name="txt" id="txt" class="txtcomment"></textarea><button class="btnComment" type="button">Send</button>
</form></div>

<div class="comment">
<span class="avatar"><img src="http://www.gravatar.com/avatar/ee61e6c16/?s=36&r=g&d=mm"></span>
<span class="poster">Jake</a></span><span class="time">5 months ago</span>
<div class="text">just a test comment ...</div>
<div class="reply"><a href="#" onclick="reply(174);">Reply</a></div><div id="new-174"></div>
</div>

<div class="comment">
<span class="avatar"><img src="http://www.gravatar.com/avatar/ee61e6c16/?s=36&r=g&d=mm"></span>
<span class="poster">Jake</a></span><span class="time">5 months ago</span>
<div class="text">another comment ...</div>
<div class="reply"><a href="#" onclick="reply(175);">Reply</a></div><div id="new-175"></div>
</div>

JS

reply = function(id){
    if(!$('#new-'+id+' .comment-post').length) {
        $('.comment-post:first').clone().attr('id', id).appendTo($('#new-'+id));
        $('#new-'+id+' .txtcomment').focus();
        $('#new-'+id+' .txtcomment').autosize();
        $('#new-'+id+' .txtcomment').bind('keydown', charcounter);
        $('#new-'+id+' .txtcomment').bind('keyup', charcounter);
    }
    else
    {
        $('#new-'+id+' .comment-post').remove();
    }          
}
InformationsquelleAutor Brian Smith | 2013-06-16
  1. 5

    Einfach weglassen .clone():

    $('.comment-post:first').attr('id', id).appendTo($('#new-'+id));

    Wenn Sie .appendTo() oder .append() um ein element anzuhängen, um ein einziges Ziel es ist verschoben, nicht kopiert. (Bis zu Ihnen, ob Sie auch weglassen möchten die .attr() Teil.)

    Können auch Sie liefern nur einen Selektor-string zu .appendTo() anstatt ein neues jQuery-Objekt und übergeben es:

    $('.comment-post:first').attr('id', id).appendTo('#new-'+id);
    • Danke, das funktioniert perfekt.
    InformationsquelleAutor nnnnnn
  2. 3

    Ändern, entfernen Sie die clone() aus deinem js-code.

    $('.comment-post:first').attr('id', id).appendTo($('#new-'+id));
    InformationsquelleAutor Nagarjun
  3. 2

    Ich weiß, es ist schon gelöst, aber für Forschungs-Zwecke, Folgen eine kurze Erläuterung:

    .append()

    Wenn ein element ausgewählt diese Weise eingefügt wird, an einem einzigen Ort
    an anderer Stelle in den DOM, es wird verschoben in die ENDE des Ziels (nicht geklont):

    $( "#div_container" ).append( $( "#div_moved" ) );

    http://api.jquery.com/append/

    .prependTo()

    Wenn ein element ausgewählt diese Weise eingefügt wird, an einem einzigen Ort
    an anderer Stelle in den DOM, es wird verschoben in die ANFANG des Ziels (nicht geklont):

    $( "#div_moved" ).prependTo( $( "#div_container" ) );

    http://api.jquery.com/prependto/

    .clone () -

    Erstellen Sie eine Tiefe Kopie des Satzes von aufeinander abgestimmten Elementen.

    $( ".div_cloned" ).clone().prependTo( $( "#div_container" ) );;

    http://api.jquery.com/clone/

    • Danke für die Erklärung der Unterschiede!
    InformationsquelleAutor Fabiano Shark
  4. 1

    Arbeiten DEMO hier http://jsfiddle.net/yeyene/WTuRY/1/

    Können Sie .html() um die gesamte html-Inhalte in DIV.

    JQUERY

    $(document).ready(function(){
    $('a#move').on('click', function(){
        $('#newDIV').html($('.comment-post').html());
        $('.comment-post').remove();     
    });   
});
    InformationsquelleAutor yeyene
Schreibe einen Kommentar