Question

我希望在通过名为＆＃39; products＆＃39;的变量定义的图像之前添加html。

在上下文中 - 我们的想法是，如果产品图片被定义为销售商品（产品＆＃39;变量中列出的产品），则会向商品图片添加特价商品。

我几乎就在那里，但我的优惠文字被多次提前，而不是每次提前一次。我假设我使用了每个陈述，但我不确定它究竟在哪里摔倒：

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

使用jQuery在选定图像之前添加HTML

1 个答案: