CODEWITHSUNDEEP
jqueryhtmlwordpress
Misamid Floride
Misamid Floride

Reputation: 46

Jquery Move Single Element at a time

Any Idea about this, In blog page there are list of blogs and in each blog there's image,title of blog,summary content and etc. The design of blog is image,title,contents and meta. I need to move the title upward of image, so I used the insertBefore. My is problem all the title in the blogs are move upwards, so in each single blog there are tons of a blog title because I use insert. Any way to prevent it to capture all the title? 

jQuery( ".bd-blog-header h2" ).insertBefore( ".bd-post-image" );

I also tried this

jQuery( ".blog-list" ).each(function( index ) {
  jQuery(this).find(".bd-post-image").append(jQuery(this).find(".bd-blog-header h2"))
});

This is a sample

<div class="container">
     <div class="img"></div>
     <div class="body">
         <h2>title</h2>
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

<div class="container">
     <div class="img"></div>
     <div class="body">
         <h2>title</h2>
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

I want is two put the h2 upwards of the img, but what's happens is like this

<div class="container">
     <h2>title</h2>
     <h2>title</h2>
     <div class="img"></div>
     <div class="body">
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>
<div class="container">
     <h2>title</h2>
     <h2>title</h2>
     <div class="img"></div>
     <div class="body">
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

what I want is like this

<div class="container">
     <h2>title</h2>
     <div class="img"></div>
     <div class="body">
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>
<div class="container">
     <h2>title</h2>
     <div class="img"></div>
     <div class="body">
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

Upvotes: 0

Views: 59

Answers (2)

Misamid Floride
Misamid Floride

Reputation: 46

for the future reference

jQuery( ".container" ).each(function( index ) {
  jQuery(this).find(".img").prepend(jQuery(this).find("h2"))
});

Upvotes: 0

ProEvilz
ProEvilz

Reputation: 5455

Select the parent element of each post, then loop through them. On each iteration find the h2 within it, then move up above the image that's also within the parent you selected.

$('.container').each(function(index, element) {
 $(this).find('h2').insertBefore($(this).find('.img'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     <div class="img">image here</div>
     <div class="body">
         <h2>title</h2>
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

<div class="container">
     <div class="img">image here</div>
     <div class="body">
         <h2>title</h2>
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

Upvotes: 1

Related Questions