how to move an element to another parent using jquery

Question

Hi can anyone help me move class="title" to under class="thumbnail" but above span? Spent the wholeday working on this but no luck. I prefer in using jquery. I hope someone could help me sort this out. Thank you so much in advance.

<div class="aa">
    <div class="title">
        <a href="#">Test 1</a>
    </div>
    <div class="content">
        <div class="thumbnail">
            <span>Hello</span>
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

<div class="aa">
    <div class="title">
        <a href="#">Test 1</a>
    </div>
    <div class="content">
        <div class="thumbnail">
            <span>Hello</span>        
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

<div class="aa">
    <div class="title">
        <a href="#">Test 1</a>
    </div>
    <div class="content">
        <div class="thumbnail">
            <span>Hello</span>        
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

I wanted the output to look like the below:

<div class="aa">
    <div class="content">
        <div class="thumbnail">
            <div class="title">
                <a href="#">Test 1</a>
            </div>
            <span>Hello</span>
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

<div class="aa">
    <div class="content">
        <div class="thumbnail">
            <div class="title">
                <a href="#">Test 1</a>
            </div>
            <span>Hello</span>
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

<div class="aa">
    <div class="content">
        <div class="thumbnail">
            <div class="title">
                <a href="#">Test 1</a>
            </div>
            <span>Hello</span>
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

Thank you so much.

Possible duplicate of [How to move an element into another element?](https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element) — Romeo Sierra, Aug 15 '18 at 07:03

score 1 · Accepted Answer · answered Aug 15 '18 at 07:03

1

You can use this:

$(".title").each(function() {
  $(this).prependTo($(this).next(".content").find(".thumbnail"));
});

This will move each of your title to the top of the corrosponding thumbnail

Demo

$(".title").each(function() {
  $(this).prependTo($(this).next(".content").find(".thumbnail"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aa">
  <div class="title">
    <a href="#">Test 1</a>
  </div>
  <div class="content">
    <div class="thumbnail">
      <span>Hello</span>
      <a href="#"><img src=""></a>
    </div>
  </div>
</div>

<div class="aa">
  <div class="title">
    <a href="#">Test 1</a>
  </div>
  <div class="content">
    <div class="thumbnail">
      <span>Hello</span>
      <a href="#"><img src=""></a>
    </div>
  </div>
</div>

<div class="aa">
  <div class="title">
    <a href="#">Test 1</a>
  </div>
  <div class="content">
    <div class="thumbnail">
      <span>Hello</span>
      <a href="#"><img src=""></a>
    </div>
  </div>
</div>

answered Aug 15 '18 at 07:03

Carsten Løvbo Andersen

26,637
10
47
77

Isn't this question a dupe? – Romeo Sierra Aug 15 '18 at 07:05
@RomeoSierra well, kinda, but it don't expain how to do it with multiple elements, so thats why i posted the answer. – Carsten Løvbo Andersen Aug 15 '18 at 07:06
@RomeoSierra but nicely spottet by you, Thumbs up – Carsten Løvbo Andersen Aug 15 '18 at 07:07
@CarstenLøvboAndersen you just saved my life. Thousand likes – Justin Duran Aug 15 '18 at 22:22
@JustinDuran No problem, happy to help, if this solved your problem, please consider marking this as answer – Carsten Løvbo Andersen Aug 16 '18 at 05:59
sorry I am just new here, how to mark this solved or answer? Thanks – Justin Duran Sep 12 '18 at 22:44
@JustinDuran Just to the left of my answer you see the up and down vote buttons, below that you should see a faded checkmark, just hit that. – Carsten Løvbo Andersen Sep 13 '18 at 06:04

how to move an element to another parent using jquery

1 Answers1