CODEWITHSUNDEEP
jquery
Justin Duran
Justin Duran

Reputation: 21

how to move an element to another parent using jquery

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.

Upvotes: 1

Views: 109

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

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>

Upvotes: 1

Related Questions