CODEWITHSUNDEEP
jqueryhtmlcss
Karlgoldstraw
Karlgoldstraw

Reputation: 628

Move multiple divs to other divs in a list

I have multiple repeating parent divs each containing a 'Date' div and an image container.

I want to move each 'Date' div in each parent to another location within the repeating element end using jQuery.

How is this possible? I've looked at other questions on here but nothing really works for me.

My repeating HTML is:

<div class="grid_12 featureEventWrap">

<div class="row">
  <div class="grid_8" style="padding-top: 20px">

    <div class="dateWrap">
      <h6>December</h6>
      <h5>14</h5>
    </div>

    <div class="featuredEvent">
      <h2>Title</h2>
      <h3>Subtitle</h3>
      <p>Paragraph, paragraph</p>
    </div>
  </div>

  <div class="grid_4 featuredEventImage">
    <div class="featuredEventImageShad">
      <img src="images/news/1.jpg" width="270" height="175">
    </div>
  </div>

</div>
</div>

This repeats multiple times down the page, but I want to move .dateWrap to be inside .featuredEventImage on each instance. Any help is much appreciated!

Upvotes: 0

Views: 1257

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Sure, should be easy as:

$('.featureEventWrap').each(function(){
    var $destination = $(this).find(' .destinationElement ');
    $(this).find(' .elementToMove ').appendTo( $destination );
});

http://api.jquery.com/each/
http://api.jquery.com/find/
http://api.jquery.com/appendto/

Upvotes: 2

rahul maindargi
rahul maindargi

Reputation: 5625

try this 

  $('.dateWrap').each(function() {
        $(this).siblings('.featuredEventImage').append(this);
    });

Upvotes: 0

Luca Rainone
Luca Rainone

Reputation: 16458

try this 

$('.dateWrap').each(function() {
    $(this).parents('.row:first').find('.featuredEventImage').append(this);
});

Note: When you append an element inside another element, the first lose the original parent and it will moved into new object.

Upvotes: 0

Related Questions