Mit jQuery HTML vor ausgewählten Bildern voranstellen

Question

Ich möchte HTML vor Bildern, die über eine Variable mit dem Namen "Produkte" definiert wurden, voranstellen.

Im Kontext - Die Idee besteht darin, Produktbildern Sonderangebotstexte hinzuzufügen, wenn sie als Verkaufspositionen definiert wurden (die Produkte, die in der Variablen 'products' aufgelistet sind).

Ich bin fast da, aber mein Angebot Text wird mehrmals anstelle von einmal für jeden vor. Ich gehe davon aus, dass es meine Verwendung der jede Aussage, aber ich bin mir nicht sicher, wo genau es Umfallen:

HTML:

<ul class="product-list"> 
    <li><img src="https://i.imgur.com/Jdtk2XH.png"></li><!-- Targetted --> 
    <li><img src="https://i.imgur.com/rFEw1ZQ.png"></li><!-- Targetted --> 
    <li><img src="https://i.imgur.com/OZq9PFh.png"></li><!-- Targetted --> 
    <li><img src="http://i.imgur.com/EAT4hW8.png"></li><!-- Not targetted --> 
    <li><img src="https://i.imgur.com/8GSRqEg.png"></li><!-- Targetted --> 
</ul> 

jQuery:

$(function() { 
    /*Products we're targetting*/ 
    var products = ["Jdtk2XH", "rFEw1ZQ", "OZq9PFh", "8GSRqEg"]; 

    $.each(products, function(key, value) { 
    /*For each product found add class*/ 
     $('ul.product-list li img[src*="' + value + '"]').addClass('special_offer_image');  
     /*On each product with class add something*/ 
     $("<p>Test</p>").insertBefore("img.special_offer_image"); 

    }); 
}); 

jsfiddle Link: https://jsfiddle.net/9ucqdg2e/9/

Wohin gehe ich falsch?

Answer 1

Problembereich ist $("<p>Test</p>").insertBefore("img.special_offer_image"); es wird eine neue P erstellen und wird vor jedem Selektor eingefügt.

Sie müssen die Referenz img abrufen und dann die Insertion durchführen.

$.each(products, function(key, value) { 
    //Get the reference of the img element 
    var img = $('ul.product-list li img[src*="' + value + '"]'); 
    //Add Class 
    img.addClass('special_offer_image'); 
    //Insert 
    $("<p>Test</p>").insertBefore(img); 
}); 

Updated Fiddle

---

Oder verwenden

$.each(products, function(key, value) { 
    $('ul.product-list li img[src*="' + value + '"]').addClass('special_offer_image');   

}); 

//Move outside each() 
$("<p>Test</p>").insertBefore('img.special_offer_image');