dubbs
dubbs

Reputation: 1199

jquery insertBefore duplication issue

Using insertBerfore to move an item above another where it appears in many nested DIVs... issue is - its duplicating the item that is being move so I have multiple versions of it... What am I doing wrong here?

I've tried using an each loop and that has the same problem...

I just need the DATE to sit above the TITLE HERE

( function($) {
    
   function journalIndexFeedItemMetaSwapper() {
    $(".journalIndexPostGridFeed .nectar-post-grid .nectar-post-grid-item .item-main span.meta-date").insertBefore(".journalIndexPostGridFeed .nectar-post-grid .nectar-post-grid-item .item-main h3.post-heading");
  }
    
$(window).load(function() { setTimeout(function(){ journalIndexFeedItemMetaSwapper(); },1000); });

})(jQuery);
<div class="journalIndexPostGridFeed">
<div class="nectar-post-grid">
<div class="nectar-post-grid-item">
<div class="item-main">
<h3 class="post-heading">TITLE HERE</h3>
<span class="meta-date">DATE</span>
</div>
</div>
</div>
</div>

<div class="journalIndexPostGridFeed">
<div class="nectar-post-grid">
<div class="nectar-post-grid-item">
<div class="item-main">
<h3 class="post-heading">TITLE HERE</h3>
<span class="meta-date">DATE</span>
</div>
</div>
</div>
</div>

<div class="journalIndexPostGridFeed">
<div class="nectar-post-grid">
<div class="nectar-post-grid-item">
<div class="item-main">
<h3 class="post-heading">TITLE HERE</h3>
<span class="meta-date">DATE</span>
</div>
</div>
</div>
</div>

<div class="journalIndexPostGridFeed">
<div class="nectar-post-grid">
<div class="nectar-post-grid-item">
<div class="item-main">
<h3 class="post-heading">TITLE HERE</h3>
<span class="meta-date">DATE</span>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

Upvotes: 0

Views: 69

Answers (3)

Kosh
Kosh

Reputation: 18393

You're taking all the DATEs and put them all before all the TITLEs.
So you have to put them one-by-one before the corresponding element:

( function($) {
    
   function journalIndexFeedItemMetaSwapper() {
    $("span.meta-date").each(
      (i, e) => $(e).prev("h3.post-heading").before(e)
    );
  }
    
$(window).load(function() { setTimeout(function(){ journalIndexFeedItemMetaSwapper(); },1000); });

})(jQuery);
<div class="journalIndexPostGridFeed">
<div class="nectar-post-grid">
<div class="nectar-post-grid-item">
<div class="item-main">
<h3 class="post-heading">TITLE HERE 1</h3>
<span class="meta-date">DATE 1</span>
</div>
</div>
</div>
</div>

<div class="journalIndexPostGridFeed">
<div class="nectar-post-grid">
<div class="nectar-post-grid-item">
<div class="item-main">
<h3 class="post-heading">TITLE HERE 2</h3>
<span class="meta-date">DATE 2</span>
</div>
</div>
</div>
</div>

<div class="journalIndexPostGridFeed">
<div class="nectar-post-grid">
<div class="nectar-post-grid-item">
<div class="item-main">
<h3 class="post-heading">TITLE HERE 3</h3>
<span class="meta-date">DATE 3</span>
</div>
</div>
</div>
</div>

<div class="journalIndexPostGridFeed">
<div class="nectar-post-grid">
<div class="nectar-post-grid-item">
<div class="item-main">
<h3 class="post-heading">TITLE HERE 4</h3>
<span class="meta-date">DATE 4</span>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

Upvotes: 0

Kinglish
Kinglish

Reputation: 23654

Your code is finding all instances of X and inserting them before all instances of Y. There are probably more elegant methods, but an easy one is to use a loop and reference the relative objects for each using closest() and find()

(function($) {
  function journalIndexFeedItemMetaSwapper() {
    let el = ".journalIndexPostGridFeed .nectar-post-grid .nectar-post-grid-item .item-main span.meta-date"
    $(el).each(function() {
      $(this).insertBefore($(this).closest('.item-main').find("h3.post-heading"))
    });
  }

  $(window).load(function() {
    setTimeout(function() {
      journalIndexFeedItemMetaSwapper();
    }, 1000);
  });
})(jQuery);
<div class="journalIndexPostGridFeed">
  <div class="nectar-post-grid">
    <div class="nectar-post-grid-item">
      <div class="item-main">
        <h3 class="post-heading">TITLE HERE</h3>
        <span class="meta-date">DATE</span>
      </div>
    </div>
  </div>
</div>

<div class="journalIndexPostGridFeed">
  <div class="nectar-post-grid">
    <div class="nectar-post-grid-item">
      <div class="item-main">
        <h3 class="post-heading">TITLE HERE</h3>
        <span class="meta-date">DATE</span>
      </div>
    </div>
  </div>
</div>

<div class="journalIndexPostGridFeed">
  <div class="nectar-post-grid">
    <div class="nectar-post-grid-item">
      <div class="item-main">
        <h3 class="post-heading">TITLE HERE</h3>
        <span class="meta-date">DATE</span>
      </div>
    </div>
  </div>
</div>

<div class="journalIndexPostGridFeed">
  <div class="nectar-post-grid">
    <div class="nectar-post-grid-item">
      <div class="item-main">
        <h3 class="post-heading">TITLE HERE</h3>
        <span class="meta-date">DATE</span>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

Upvotes: 1

Barmar
Barmar

Reputation: 781038

From the documentation:

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first, and that new set (the original element plus clones) is returned.

Since there are multiple .journalIndexPostGridFeed .nectar-post-grid .nectar-post-grid-item .item-main h3.post-heading elements, the source elements are duplicated for each of them.

I suspect what you really want is to insert each source element before the target in the same DIV, not insert all the sources before all the targets.

(function($) {

  function journalIndexFeedItemMetaSwapper() {
    $(".journalIndexPostGridFeed .nectar-post-grid .nectar-post-grid-item .item-main span.meta-date").each(function() {
      $(this).insertBefore($(this).siblings("h3.post-heading"));
    });
  }

  $(window).load(function() {
    setTimeout(function() {
      journalIndexFeedItemMetaSwapper();
    }, 1000);
  });

})(jQuery);
<div class="journalIndexPostGridFeed">
  <div class="nectar-post-grid">
    <div class="nectar-post-grid-item">
      <div class="item-main">
        <h3 class="post-heading">TITLE HERE</h3>
        <span class="meta-date">DATE</span>
      </div>
    </div>
  </div>
</div>

<div class="journalIndexPostGridFeed">
  <div class="nectar-post-grid">
    <div class="nectar-post-grid-item">
      <div class="item-main">
        <h3 class="post-heading">TITLE HERE</h3>
        <span class="meta-date">DATE</span>
      </div>
    </div>
  </div>
</div>

<div class="journalIndexPostGridFeed">
  <div class="nectar-post-grid">
    <div class="nectar-post-grid-item">
      <div class="item-main">
        <h3 class="post-heading">TITLE HERE</h3>
        <span class="meta-date">DATE</span>
      </div>
    </div>
  </div>
</div>

<div class="journalIndexPostGridFeed">
  <div class="nectar-post-grid">
    <div class="nectar-post-grid-item">
      <div class="item-main">
        <h3 class="post-heading">TITLE HERE</h3>
        <span class="meta-date">DATE</span>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

Upvotes: 0

Related Questions