在选定图像之前使用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');