jQuery Move div into another div

Question

I need to move .link-field-first-ticket-button inside .event-location-one

here's the fiddle: http://jsfiddle.net/ksV73/

It's a cms so I have no choice in the matter.

this is what I'm trying, it's not doing much of anything

$(".widget-upcoming-events-blog li").each( function() {
     var links = $(this).children(".link-field-first-ticket-button").html();
     $(this).children(".link-field-first-ticket-button").html("");
     $(this).children(".event-location-one").append(links);
});

score 36 · Answer 1 · answered Feb 15 '14 at 20:10

36

You can just do this:

$(".link-field-first-ticket-button").appendTo(".event-location-one");

It will move the first ticket button to event location

answered Feb 15 '14 at 20:10

Ricky Stam

2,116
21
25

Nice and simple, lovely – Andy Holmes Feb 15 '14 at 20:11
It's really clean and simple! Great answer. – Toothbrush Feb 15 '14 at 20:12

score 2 · Answer 2 · edited Feb 15 '14 at 20:09

2

x = $(".widget-upcoming-events-blog").find(".link-field-first-ticket-button").remove()
$(".event-location-one").append(x);

edited Feb 15 '14 at 20:09

George Cummins

28,485
8
71
90

answered Feb 15 '14 at 20:09

Oskar Skuteli

648
6
16

score 2 · Answer 3 · answered Feb 15 '14 at 20:13

The html method will give you the content inside the element, not the element itself.

Just append the element where you want it. As an element can't exist in two places at once, it will be moved:

$(".widget-upcoming-events-blog li").each( function() {
  var links = $(this).children(".link-field-first-ticket-button");
  $(this).children(".event-location-one").append(links);
});

score 2 · Answer 4 · answered Feb 15 '14 at 20:14

2

try this

$(".widget-upcoming-events-blog li").each( function() {
     var links = $(".link-field-first-ticket-button").html();
     $(".link-field-first-ticket-button").html("");
     $(".event-location-one").append(links);
});

answered Feb 15 '14 at 20:14

ponciste

2,231
14
16

score 1 · Answer 5 · answered Feb 15 '14 at 20:08

Change your .children() to .find()

$(".widget-upcoming-events-blog li").each( function() {
     var links = $(this).find(".link-field-first-ticket-button").html();
     $(this).find(".link-field-first-ticket-button").html("");
     $(this).find(".event-location-one").append(links);
});

score 1 · Answer 6 · answered Feb 15 '14 at 20:10

1

How about use the .appendTo() function?

For example:

$(".widget-upcoming-events-blog li").each( function() {
 $(this).find(".link-field-first-ticket-button")
        .appendTo( $(this).find(".event-location-one") );
});

answered Feb 15 '14 at 20:10

André Muniz

708
2
8
17

Guy. You saved my life :) Thanks. The other methods were duplicating my button on the site for some reason, even though they work on the fiddle – toast Feb 15 '14 at 20:12

jQuery Move div into another div

6 Answers6