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.

Answer 1

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>


  

Answer 2

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>