Question 166611 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How do you iterate over DOM elements in WordPress and append each one to other elements?

I use a custom post on WordPress, I had an issue with the post date not displaying by default on the archive page
so I added codex code to displaying it
it worked fine but the problem is each post date displaying before the element
for example:

<!-- Post 1-->
<div class=".archive-custom-post-date">02/03/2021</div>
<article>Post 1</article>

<!-- Post 2-->
<div class=".archive-custom-post-date">02/03/2021</div>
<article>Post 2</article>

<!-- Post 3-->
<div class=".archive-custom-post-date">02/02/2021</div>
<article>Post 3</article>

<!-- Post 4-->
<div class=".archive-custom-post-date">0`/03/2021</div>
<article>Post 4</article>

<!-- Post 5-->
<div class=".archive-custom-post-date">12/02/2021</div>
<article>Post 5</article>

so I tried to add jQuery code to iterate over each post date and append them to each post but it didn’t work, they attach to the last post (all dates) only, or adding all post dates to each post for example each post will have all dates.

 //@1 if I use this function it will add all post dates to each post
 function append_post_date() {
    jQuery(".archive .archive-custom-post-date").each(function (
      idx,
      date_element
    ) {
      return jQuery(date_element).appendTo(".archive article");
    });
  }


//@2 if I use this function it will added all post dates to last element on dom
function append_post_date() {
  jQuery(".archive .archive-custom-post-date").each(function (
    idx,
    date_element
  ) {
    // #2
    jQuery(".archive article").each(function (idx, article_element) {
      return jQuery(this).append(date_element);
    });
  });

  //end
}
Tags:

2

Answers


  1. 0

    You can loop of '.archive-custom-post-date' each and append to the next article. check below snippet.

    (function($){
  $(document).ready(function(){
    $('.archive-custom-post-date').each(function(){
      var dateHtml = $(this);
      $(this).next().append(dateHtml);
    });
  });
})(jQuery);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Post 1-->
<div class="archive-custom-post-date">02/03/2021</div>
<article>Post 1</article>

<!-- Post 2-->
<div class="archive-custom-post-date">02/03/2021</div>
<article>Post 2</article>

<!-- Post 3-->
<div class="archive-custom-post-date">02/02/2021</div>
<article>Post 3</article>

<!-- Post 4-->
<div class="archive-custom-post-date">0`/03/2021</div>
<article>Post 4</article>

<!-- Post 5-->
<div class="archive-custom-post-date">12/02/2021</div>
<article>Post 5</article>
    Login or Signup to reply.
  2. 0

    Solution in vanilla js

    // iterate over all article elements on page    
document.querySelectorAll('article').forEach(article => {
    // get element before article
    const date = article.previousElementSibling;
    // remove it from dom
    date.parentElement.removeChild(date);
    // add it as first child of article
    article.prepend(date);
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search