Finding and Inserting Item

Question

I'd like to check every attribute src of the image that has class .sogreen that has a unique prefix on the start of the name or anywhere in the name. After that, it will find the img element that has a title attribute that has the same prefix on the first image that we get, and then insert that image below the first image.

HTML

<div class="original">
  <img src="pref1-awesome.png" class="img-responsive sogreen">
  <img src="pref99-awesome.png" class="img-responsive sogreen">
  <img src="pref44-awesome.png" class="img-responsive sogreen">
</div>

<div class="image-entry-to-insert">
  <img src="test12.png" title="pref1" class="img-responsive sogreen">
  <img src="test4.png" title="pref99" class="img-responsive sogreen">
  <img src="test54.png" title="pref44" class="img-responsive sogreen">
</div>

Result Should be:

<div class="original">
  <img src="pref1-awesome.png" class="img-responsive sogreen">
  <!-- Inserted Item -->
  <img src="test12.png" title="pref1" class="img-responsive sogreen">
  <!-- End of Inserted Item -->
  <img src="pref99-awesome.png" class="img-responsive sogreen">
  <!-- Inserted Item -->
  <img src="test4.png" title="pref99" class="img-responsive sogreen">
  <!-- End of Inserted Item -->
  <img src="pref44-awesome.png" class="img-responsive sogreen">
  <!-- Inserted Item -->
  <img src="test54.png" title="pref44" class="img-responsive sogreen">
  <!-- End of Inserted Item -->
</div>

Rough JS Not working:

var imgsrc = $("img.sogreen").attr('src');
console.log(imgsrc);
$(imgsrc).each(function(index, value) {
  var imgData = $(this);
  $("img").each(function(index2, value2) {
    var elementTocounter = $(this).attr('title');
    if (imgData == elementTocounter) {
      // TODO img insertafter so green
    }
  });
});

Note: sogreen image might change continuously so for example if the sogreen change the src for an instance the below image should be updated as well.

score 2 · Answer 1 · answered Aug 21 '20 at 02:19

You can do it like this in vanilla JS:

// get original images
let origImages = document.querySelectorAll(".original .sogreen")

// loop through originals
origImages.forEach((orig) => {
    // get prefix
    let prefix = orig.attributes.src.value.split("-")[0]

    // get element to be inserted
    let insert = document.querySelector(`[title='${prefix}'].sogreen`)

    // insert element as sibling
    // https://stackoverflow.com/a/4793630/1366033
    orig.parentNode.insertBefore(insert, orig.nextSibling);
})

Demo in Stack Snippets

// get original images
let origImages = document.querySelectorAll(".original .sogreen")

// loop through originals
origImages.forEach((orig) => {
    // get prefix
    let prefix = orig.attributes.src.value.split("-")[0]

    // get element to be inserted
    let insert = document.querySelector(`[title='${prefix}'].sogreen`)

    // insert element as sibling
    // https://stackoverflow.com/a/4793630/1366033
    orig.parentNode.insertBefore(insert, orig.nextSibling);
})

<div class="original">
  <img src="pref1-awesome.png" class="img-responsive sogreen">
  <img src="pref99-awesome.png" class="img-responsive sogreen">
  <img src="pref44-awesome.png" class="img-responsive sogreen">
</div>

<div class="image-entry-to-insert">
  <img src="test12.png" title="pref1" class="img-responsive sogreen">
  <img src="test4.png" title="pref99" class="img-responsive sogreen">
  <img src="test54.png" title="pref44" class="img-responsive sogreen">
</div>

score 1 · Answer 2 · answered Aug 21 '20 at 02:20

Following uses filter() to find the associated opposite image and after() to insert

// demo setup only
$('img').attr('alt', function(){ return $(this).attr('src')});


let $origImg = $('.original img.sogreen'),
    $insImg = $('.image-entry-to-insert img.sogreen')
    
    
$insImg.each(function(){
    const prefix = this.title;
    
    $origImg.filter(function(){
        return $(this).attr('src').startsWith(prefix)
    }).after(this)

})

img{display:block; margin:10px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="original">
<p>Original</p>
  <img src="pref1-awesome.png" class="img-responsive sogreen">
  <img src="pref99-awesome.png" class="img-responsive sogreen">
  <img src="pref44-awesome.png" class="img-responsive sogreen">
</div>
<hr/>
<div class="image-entry-to-insert">
<p>to insert</p>
<img src="test12.png" title="pref1" class="img-responsive sogreen">
<img src="test4.png" title="pref99" class="img-responsive sogreen">
<img src="test54.png" title="pref44" class="img-responsive sogreen">
</div>

PeterKA · Answer 3 · 2020-08-21T02:38:29.680

You can use the .after(function) jQuery method like so:

$('div.original > img[src].sogreen').after(function() {
    let prefix = $(this).attr('src').split('-')[0];
    return $('div.image-entry-to-insert > img[title].sogreen')
        .filter((i,img) => $(img).attr('title') === prefix);
});

DEMO

$(function() {
    $('div.original > img[src].sogreen').after(function() {
        let prefix = $(this).attr('src').split('-')[0];
        return $('div.image-entry-to-insert > img[title].sogreen')
            .filter((i,img) => $(img).attr('title') === prefix);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="original">
  <img src="pref1-awesome.png" class="img-responsive sogreen">
  <img src="pref99-awesome.png" class="img-responsive sogreen">
  <img src="pref44-awesome.png" class="img-responsive sogreen">
</div>

<div class="image-entry-to-insert">
  <img src="test12.png" title="pref1" class="img-responsive sogreen">
  <img src="test4.png" title="pref99" class="img-responsive sogreen">
  <img src="test54.png" title="pref44" class="img-responsive sogreen">
</div>

Thanks! @PeterKA how ever its not working if the url is already included — , Aug 21 '20 at 03:07
@LuvyGimeno would you please explain what you mean. Thank you. — PeterKA, Aug 21 '20 at 13:42

Nicholas Gooding Rios · Answer 4 · 2020-08-21T04:39:49.933

Here is a solution for your issue using JQuery as @KyleMit already posted a JS Vanilla perfect answer.

var origImages = $(".original .sogreen");


$.each(origImages, function(key, value) {
  var prefix = $(value).attr('src').split('-')[1];
  var toI = $('.image-entry-to-insert [title=' + prefix + ']');
  toI.insertAfter($(value));
})

.original {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="original">
  <img src="image/full/path/img-pref1-awesome.png" alt="pref1-awesome.png" class="img-responsive sogreen">
  <img src="image/full/path/img-pref99-awesome.png" alt="pref99-awesome.png" class="img-responsive sogreen">
  <img src="image/full/path/img-pref44-awesome.png" alt="pref44-awesome.png" class="img-responsive sogreen">
</div>

<div class="image-entry-to-insert">
  <img src="test12.png" alt="test12.png" title="pref1" class="img-responsive sogreen">
  <img src="test4.png" alt="test4.png" title="pref99" class="img-responsive sogreen">
  <img src="test54.png" alt="test54.png" title="pref44" class="img-responsive sogreen">
</div>

---- UPDATE ----

I have changed the snippet scenario so that the pref# part of the src attribute is not at the beginning of the String but at another position (in this case the second).

In this scenario we change the line var prefix = $(value).attr('src').split('-')[0]; to var prefix = $(value).attr('src').split('-')[1]; of the JavaScript code so instead of getting the first position when splitting the String, we get the second where the pref# part is located.

What you need to make sure is that when you standarize the url of the src attribute you do it in such a way that when splitting by a specific character the pref# part will always occupy the same position, i.e. [1] in our case.

Thank you! @nicholas but it's not working if the url are already included :( — , Aug 21 '20 at 03:02
@LuvyGimeno Which url you mean? If you mean that the `src="pref99-awesome.png"`changes to lets say `src="sometinngelseinhere-pref99-awesome.png"` just make sure that instead of getting the `[0]` element in the split array you get the desired one. I'm editing the post to include this. — Nicholas Gooding Rios, Aug 21 '20 at 04:27

Finding and Inserting Item

4 Answers4

Demo in Stack Snippets