CODEWITHSUNDEEP
jquery
dubbs
dubbs

Reputation: 1199

Issues moving an element above another

Having a real mare trying to move the <h3 class="title"> element above the <span class="meta"> in this block of code below. Note, I have multiple versions of this on the page so it needs to work for all of the instances on the page and not just one.

<div class="col”>
<a href="/3rd-news-post/"></a>
<div class="post-header">
<span class="meta"> 4th December 2018 in <a href=“/category/projects/">Projects</a> </span> 
<h3 class="title">3rd news post</h3>    
</div><!--/post-header-->
<div class="excerpt">This is a news post.</div> 
<span>Read More <i class="icon-button-arrow">    </i></span>
</div>

Any suggestions on how to get this to work?

Thanks

Upvotes: 0

Views: 16

Answers (1)

Barmar
Barmar

Reputation: 780843

Use .each() to loop over all the headers, and move it before the preceding span.

$("h3.title").each(function() {
  $(this).insertBefore($(this).prev("span.meta"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <a href="/3rd-news-post/"></a>
  <div class="post-header">
    <span class="meta"> 4th December 2018 in <a href="/category/projects/">Projects</a> </span>
    <h3 class="title">3rd news post</h3>
  </div>
  <!--/post-header-->
  <div class="excerpt">This is a news post.</div>
  <span>Read More <i class="icon-button-arrow">    </i></span>
</div>

Upvotes: 1

Related Questions