Reputation: 1199
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
Reputation: 18393
You're taking all the DATE
s and put them all before all the TITLE
s.
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
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
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