Question 295172 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Move an element below another in DOM

Struggling to get this code to work to move the .meta div to sit below the h3 in the DOM. It works, but does it twice as there are 2 instances of this code on the page, I want it to work both times, but not display two versions of the .meta div… so both dates appear….?? What am I doing wrong ?

(function($) {
  $('.home_FeedsWrapper .vc_col-sm-4 .post-header .meta').each(function() {
    $(this).insertAfter($('h3'));
  });
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home_FeedsWrapper">

  <div class="vc_col-sm-4">
    <div class="article-content-wrap">
      <div class="post-header">
        <span class="meta"> 23 November 2022 </span>
        <h3 class="title">This is the title here</h3>
      </div>
    </div>
  </div>


  <div class="vc_col-sm-4">
    <div class="article-content-wrap">
      <div class="post-header">
        <span class="meta">18 October 2022 </span>
        <h3 class="title">This is another title that sits here</h3>
      </div>
    </div>
  </div>

</div>
Tags:

2

Answers


  1. 0

    You should insert each date after the next h3 like this :

    $(this).insertAfter($(this).next("h3"));

    $('.home_FeedsWrapper .vc_col-sm-4 .post-header .meta').each(function() {
  $(this).insertAfter($(this).next("h3"));
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home_FeedsWrapper">
  <div class="vc_col-sm-4">
    <div class="article-content-wrap">
      <div class="post-header">
        <span class="meta"> 23 November 2022 </span>
        <h3 class="title">This is the title here</h3>
      </div>
    </div>
  </div>
  <div class="vc_col-sm-4">
    <div class="article-content-wrap">
      <div class="post-header">
        <span class="meta">18 October 2022 </span>
        <h3 class="title">This is another title that sits here</h3>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Consider the following.

    (function($) {
  $('.home_FeedsWrapper .vc_col-sm-4 .post-header').each(function(i, el) {
    var meta = $(".meta", el).detach();
    meta.insertAfter($("h3", el));
  });
})(jQuery);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home_FeedsWrapper">

  <div class="vc_col-sm-4">
    <div class="article-content-wrap">
      <div class="post-header">
        <span class="meta"> 23 November 2022 </span>
        <h3 class="title">This is the title here</h3>
      </div>
    </div>
  </div>


  <div class="vc_col-sm-4">
    <div class="article-content-wrap">
      <div class="post-header">
        <span class="meta">18 October 2022 </span>
        <h3 class="title">This is another title that sits here</h3>
      </div>
    </div>
  </div>

</div>

    This ensures that each header is reviewed and the elements are only moved within that header. First, we detach the Span, and then insert it after the Header3.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search