Moving a span element from one div to another with jQuery?

Question

I want to move (on page load) the <span>votes</span> part at the bottom and place it inside the .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>

So that the final result looks like this:

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

How to accomplish that with jQuery?

EDIT:

Forgot to mention that where is more than one .topic-like-count div (for example):

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

(I think I need to use ($this) somewhere)

Rafay · Accepted Answer · 2011-08-30T04:54:05.913

6

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

yet another edit

$(".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/

and

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

edited Aug 30 '11 at 04:54

answered Aug 30 '11 at 04:18

Rafay

30,950
5
68
101

erm wouldn't $(function(... or $(document).ready... be better than a timeout? – griegs Aug 30 '11 at 04:25
the setTimeout function is just so that the effect is been seen that originally the span is positioned at the end and then placed inside the intended div – Rafay Aug 30 '11 at 04:25
ah, looks like part of the solution – griegs Aug 30 '11 at 04:26
1

Why are you doing a .clone() and then .remove()? Why not just move it with .appendTo()? – aknosis Aug 30 '11 at 04:28
@Aknosis that didn't occured to me – Rafay Aug 30 '11 at 04:30
@3nigma Hey thanks, but I forgot to mention taht there are a lot of `.topic-like-count` divs. I think your code is just for one div. – alexchenco Aug 30 '11 at 04:33
jus made a little change to your markup, i.e. added a `class="vote"` to your `span` – Rafay Aug 30 '11 at 04:55
@Aknosis: nice, I always thought the append() and appendTo() methods required you to detach the element first. – rkw Aug 30 '11 at 16:41
@rkw i still think that way may you could verify with a fiddle `:)` – Rafay Aug 30 '11 at 18:06

score 3 · Answer 2 · answered Aug 30 '11 at 04:26

3

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

There is no point in cloning, you are just wasting cycles.

answered Aug 30 '11 at 04:26

aknosis

3,602
20
33

The purpose of using > span is you target the child that is a direct descendant of .topic-like-count, you could also do .children('span') and a ton of other selectors. – aknosis Aug 30 '11 at 04:27
I have more than one `.topic-like-count` div. Is this code working every `.topic-like-count` div which has a span element inside? – alexchenco Aug 30 '11 at 04:34
I tried your code and is appending all the voting text in all the divs (around 15). – alexchenco Aug 30 '11 at 04:38

score 1 · Answer 3 · edited May 23 '17 at 12:32

1

Use the appendTo keyword.

Check out the SO answer How to move an element into another element?.

Also you could I guess use clone and then remove the original

To select the actual span in question use something like;

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

edited May 23 '17 at 12:32

Community

1
1

answered Aug 30 '11 at 04:16

griegs

22,624
33
128
205

1

hey please check my edit. There are more .topic-like-count divs. I need the code to just move the child span of its own div. Otherwise all 'votes' texts will appear every div. – alexchenco Aug 30 '11 at 04:41
1

take a look at the .each jQuery keyword in that case and itterate thru each of the div applying the same code to each – griegs Aug 30 '11 at 04:57

rkw · Answer 4 · 2011-08-30T16:42:04.020

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

Use delegates, it has a great way of sectioning off logic.

The above code translates to:

on every 'div' with 'topic-like-count' class.. (*)
listen to see if a 'span' object with 'votes' class.. (**)
causes a 'click' event.
when that happens, find the 'span' with a 'rating-result' class w/i (*)..
and add (**) after detaching it from it's original spot

Azhar Shaikh · Answer 5 · 2014-03-05T06:17:21.200

0

I used appendTo jquery function for easiest way to moving content

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

edited Mar 05 '14 at 06:17

answered Nov 13 '13 at 06:26

Azhar Shaikh

66
4

Moving a span element from one div to another with jQuery?

5 Answers5