使用jQuery将span元素从一个div移动到另一个div？

问题描述：

我想在底部移动（在页面加载）的<span>votes</span>部分，并将其放在.rating-result DIV中：使用jQuery将span元素从一个div移动到另一个div？

<div class="topic-like-count average"> 
<h4> 
    <div style="display: none">UN:F [1.9.10_1130]</div> 
    <div class="thumblock "> 
    <span class="rating-result"> 
    <div id="gdsr_thumb_text_43_a" class="gdt-size-20 gdthumbtext">0</div> 
    </span> 
    <div class="ratingtext "> 
    </div> 
    <div class="raterclear"></div> 
    </div> 
</h4> 
<span>votes</span> 
</div>

所以最后的结果是这样的：

<div class="topic-like-count average"> 
<h4> 
    <div style="display: none">UN:F [1.9.10_1130]</div> 
    <div class="thumblock "> 
    <span class="rating-result"> 
    <div id="gdsr_thumb_text_43_a" class="gdt-size-20 gdthumbtext">0</div> 
    <span>votes</span> 
    </span> 
    <div class="ratingtext "> 
    </div> 
    <div class="raterclear"></div> 
    </div> 
</h4> 
</div>

如何用jQuery来完成？

编辑：

忘了提，其中超过一个.topic-like-count格（例如）：

<div class="topic-like-count good"> 
<h4> 
    <div style="display: none">UN:F [1.9.10_1130]</div> 
    <div class="thumblock "> 
    <span class="rating-result"> 
    <div id="gdsr_thumb_text_43_a" class="gdt-size-20 gdthumbtext">1</div> 
    </span> 
    <div class="ratingtext "> 
    </div> 
    <div class="raterclear"></div> 
    </div> 
</h4> 
<span>votes</span> 
</div> 

<div class="topic-like-count average"> 
<h4> 
    <div style="display: none">UN:F [1.9.10_1130]</div> 
    <div class="thumblock "> 
    <span class="rating-result"> 
    <div id="gdsr_thumb_text_43_a" class="gdt-size-20 gdthumbtext">0</div> 
    </span> 
    <div class="ratingtext "> 
    </div> 
    <div class="raterclear"></div> 
    </div> 
</h4> 
<span>votes</span> 
</div>

（我想我需要使用($this)某处）

答

$span=$("#votes").clone(); 
$("#votes").remove(); 
$("#gdsr_thumb_text_43_a").append($span);

http://jsfiddle.net/dc47b/4/

编辑

function doIt(){ 
    setTimeout(function(){ 
    $span=$("#votes").clone(); 
    $("#votes").remove(); 
    $("#gdsr_thumb_text_43_a").append($span); 

    }, 1000); 
} 


window.onload = function() { 
    doIt(); 

    };

http://jsfiddle.net/dc47b/5/

又一编辑

$(".topic-like-count").each(function(){ 

$span=$(this).find(".vote").clone(); 
    $(this).find(".vote").remove(); 
    $(this).find("#gdsr_thumb_text_43_a").append($span); 

});

http://jsfiddle.net/BG7HC/1/

和

http://jsfiddle.net/dc47b/6/

erm不会$（函数（...或$（document）.ready ... be better超时？ – griegs

setTimeout函数只是让效果被看到，原来的跨度是在最后定位，然后放置在预期的div – Rafay

啊，看起来像解决方案的一部分 – griegs

答

使用appendTo关键字。

检查出答案How to move an element into another element?。

而且你可以我想利用克隆，然后删除原始

要选择有问题使用类似的实际跨度;

$(".topic-like-count:last-child")

哎请检查我的编辑。还有更多.topic-like-count divs。我需要代码来移动它自己的div的子跨度。否则，所有'投票'文本将出现在每个div。 – alexchenco

看看在这种情况下的.each jQuery关键字，并通过每个div应用相同的代码给每个 – griegs

答

$('.topic-like-count > span').appendTo('.rating-result');

有克隆没有意义的，你只是在浪费周期。

使用> span的目的是你的目标是.topic-like-count的直系后代的孩子，你也可以做.children （'span'）和一大堆其他选择器。 – Aknosis

我有多个“.topic-like-count”div。这个代码是否每个'.topic-like-count' div都有一个span元素在里面？ – alexchenco

我试过你的代码，并在所有div（15左右）中添加所有投票文本。 – alexchenco

答

$('div.topic-like-count').delegate('span.votes', 'click', function() { 
    $('span.rating-result').append($(this)); 
});

使用代表，它有一个很好的分割逻辑的方法。

上面的代码转换为：

与“话题样计数”类中的每个“格”。（*）
听，看是否有“票“范围”对象'class ..（**）
导致'点击'事件。
发生这种情况时，请使用'评分结果'类与我（*）找到'span'。从中分离之后
，并添加（**）是原装现货

答

我用jQuery的appendTo功能最简单的方法来移动内容

$mgdiv=$(".your_div_name"); 
$($mgdiv).appendTo(".target_div_name");

使用jQuery将span元素从一个div移动到另一个div？

相关推荐