0

我现在使用的代码只是克隆了“.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();
    }          
}
4

4 回答 4

5

只需省略.clone()：

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

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

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

$('.comment-post:first').attr('id', id).appendTo('#new-'+id);
于 2013-06-16T06:17:15.373 回答
3

更改从您的 js 代码中删除 clone()。

$('.comment-post:first').attr('id', id).appendTo($('#new-'+id));
于 2013-06-16T06:17:33.293 回答
2

我知道它已经解决了，但出于研究目的，请遵循以下简要说明：

。附加（）

如果以这种方式选择的元素被插入到 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/

。克隆（）

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

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

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

于 2015-10-09T21:36:17.467 回答
1

在这里工作演示http://jsfiddle.net/yyene/WTuRY/1/

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

查询

$(document).ready(function(){
    $('a#move').on('click', function(){
        $('#newDIV').html($('.comment-post').html());
        $('.comment-post').remove();     
    });   
});
于 2013-06-16T06:19:11.433 回答