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

Question

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

4

我希望在页面加载时将底部的<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)。

- alexchenco

5个回答

3

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

没有复制的意义，这只是浪费资源。

- aknosis

使用 > span 的目的是为了定位 .topic-like-count 的直接子元素，你也可以使用 .children('span') 和其他大量选择器。 - aknosis

жҲ‘жңүдёҚжӯўдёҖдёӘ.topic-like-count divгҖӮиҝҷж®өд»Јз ҒжҳҜеҗҰйҖӮз”ЁдәҺжҜҸдёӘеҶ…йғЁжңүspanе…ғзҙ зҡ„.topic-like-count divпјҹ - alexchenco

我尝试了你的代码，它正在将所有投票文本附加到所有div中（大约15个）。 - alexchenco

1

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

使用委托，它有一个很好的逻辑分区方式。

上面的代码翻译为：

在每个具有“topic-like-count”类的“div”上.. (*)
监听是否有带有“votes”类的“span”对象.. (**)
引起“click”事件。
当发生这种情况时，在(*)中查找具有“rating-result”类的“span”..
并在将其从原始位置分离后添加(**)

- rkw

1

使用appendTo关键字。

查看SO答案如何将一个元素移动到另一个元素中？。

此外，您可以使用克隆，然后删除原始内容。

要选择实际的span，请使用类似于以下内容的内容;

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

- griegs

1

嗨，请检查我的编辑。还有更多的“ .topic-like-count” div。我需要代码只移动它自己div中的子span。否则，“votes”文本将出现在每个div中。 - alexchenco

1

在这种情况下，请查看jQuery中的.each关键字，并遍历每个div，对每个div应用相同的代码。 - griegs

0

我使用了 appendTo jQuery 函数，这是最简单的移动内容的方法。

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

- Azhar Shaikh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rafay · Accepted Answer

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

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

EDIT

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/