I want to Change Div Order with jquery or javascript through class name

Question

my product is listing like that

<div class="post-744"></div>
<div class="post-740"></div>
<div class="post-751"></div>
<div class="post-746"></div>
<div class="post-748"></div>

i want them to list like that

<div class="post-740"></div>
<div class="post-744"></div>
<div class="post-748"></div>
<div class="post-746"></div>
<div class="post-751"></div>

i tried this but isnt working

jQuery('.post-740').insertAfter('.post-744').insertAfter('.post-748').insertAfter('.post-746').insertAfter('.post-751');

How do you create those `div`? It will be better to order them before adding them to the dom. — aloisdg, Feb 07 '20 at 15:49
its created dynamically by wordpress @aloisdgmovingtocodidact.com — Hakimuddin Saifee, Feb 07 '20 at 15:53
Not sure how it is a dupe..... @RoryMcCrossan order is not numeric order — epascarello, Feb 07 '20 at 16:01
Problem here is you assume `insertAfter` changes reference when it does not. You would need to insert them from the end to beginning. — epascarello, Feb 07 '20 at 16:05
@epascarello my bad, jumped the gun and assumed the mis-ordering in the question was a typo. I've re-opened the question — Rory McCrossan, Feb 07 '20 at 16:05

score 0 · Accepted Answer · answered Feb 07 '20 at 16:25

You are on the right track use after() instead of insertAfter().

jQuery('.post-740')
  .after($('.post-751'))
  .after($('.post-746'))
  .after($('.post-748'))
  .after($('.post-744'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="post-744">744 - 2</div>
<div class="post-740">740 - 1</div>
<div class="post-751">751 - 5</div>
<div class="post-746">746 - 4</div>
<div class="post-748">748 - 3</div>

Using an array

var posts = ['.post-740', '.post-744','.post-748','.post-746','.post-751']

var topPost = jQuery(posts.shift())
while(posts.length) {
  topPost.after($(posts.pop()))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="post-744">744 - 2</div>
<div class="post-740">740 - 1</div>
<div class="post-751">751 - 5</div>
<div class="post-746">746 - 4</div>
<div class="post-748">748 - 3</div>

I want to Change Div Order with jquery or javascript through class name

1 Answers1