Question

我想移动（在页面加载时）底部的<span>votes</span>部分并将其放在.rating-result 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（例如）：

<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)）

Answer 1

$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/

Answer 2

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

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

Answer 3

使用appendTo关键字。

查看SO回答How to move an element into another element?。

你也可以猜测使用克隆然后删除原来的

要选择有问题的实际范围，请使用以下内容：

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

Answer 4

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

使用委托，它有一种切断逻辑的好方法。

以上代码转换为：

在每个'div'上加上'topic-like-count'类..（*）
听一看'span'对象是否有'投票'类..（**）
会导致“点击”事件。
当发生这种情况时，找到带有'rating-result'类的'span'，带有（*）..
并在将其从原始位置分离后添加（**）

Answer 5

我使用appendTo jquery函数来最简单地移动内容

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

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

5 个答案: