JQUERY

Question

我现在使用的代码只是克隆“.comment_post”div并在注释下插入表单。

我想做的（如果可能的话）是将“.comment_post”div“移动”到新位置而不是克隆它。

关于我如何做到这一点的任何建议？

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

Answer 1

只需省略.clone()：

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

当您使用.appendTo()或.append()将元素附加到单个目标时，它会被移动，而不是被复制。（取决于您是否还想省略.attr()部分。）

此外，您只能为.appendTo()提供一个选择器字符串，而不是创建一个新的jQuery对象并传递它：

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

Answer 2

更改从js代码中删除clone（）。

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

Answer 3

在这里工作DEMO http://jsfiddle.net/yeyene/WTuRY/1/

您可以使用.html()在DIV中获取整个html内容。

JQUERY

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

Answer 4

我知道它已经解决了，但出于研究目的，请遵循一个简短的解释：

<强> .append（）

如果以这种方式选择的元素插入到单个位置在DOM的其他地方，它将被移动到目标的 END （未克隆）：

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

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

<强> .prependTo（）

如果以这种方式选择的元素插入到单个位置在DOM的其他地方，它将被移动到目标的 BEGGINING （未克隆）：

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

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

<强> .clone（）

创建匹配元素集的深层副本。

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

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

jQuery移动div内容而不是克隆

HTML

JS

4 个答案:

JQUERY