在選定圖像之前使用jQuery預先設置HTML

Question

我希望在通過名爲'products'的變量定義的圖像之前預先添加html。

在上下文中 - 如果產品圖像被定義爲銷售物品（「產品」變量中列出的產品），則向產品圖像添加特價商品文字。

我幾乎在那裏，但我提供的文本被預先多次，而不是每個一次。我假設這是我使用的每個語句的，但我不知道究竟在何處它倒下：

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鏈接：https://jsfiddle.net/9ucqdg2e/9/

我哪裏錯了？

Answer 1

問題區域是$("<p>Test</p>").insertBefore("img.special_offer_image");它會創建一個新的P並將插入每個選擇器之前。

您需要獲取img的參考，然後使用它進行插入。

$.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

---

或者，使用

$.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');