jquery - 使用 jQuery 在所选图像之前添加 HTML

Question

我希望在通过名为“products”的变量定义的图像之前添加 html。

上下文 - 这个想法是在产品图像被定义为促销商品(“产品”变量中列出的产品)时向产品图像添加特价优惠文本。

我快到了，但我的报价文本被多次前置，而不是每次一次。我假设这是我对 every 语句的使用，但我不确定它到底在哪里失败:

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