Question

我想根据产品标题为产品添加标签。将遍历一系列名称，如果是名称之一，将添加标签。我只需要将其添加到最近的产品模块中即可。如果您可以让我知道我走的路是否正确，请使用以下代码：

$(document).ready(function () {
  var text = $('h4').text();
  var names = ["Title1", "Title2", "Title3"];
  var i;

  for (i = 0; i < names.length; i++) { 
    if (text === names[i]) {
      $('<div class="product"><ul><li><div class="sticker"><img src="sticker.png"></div></li></ul></div>').prependTo($(this).closest('.sticker_wrapper')); 
    }                   
  }
});

以下是产品/产品模块之一的示例html代码，该产品/产品模块在页面上与javascript相对应：

<div class="sticker_wrapper"></div>
<div>
  <h4>Title1</h4>
</div>

如果有帮助，或者您可以建议更正/改进的地方。

Answer 1

您的代码中有两个主要问题。首先，您一次性获得所有h4元素的文本，然后将它们与数组中的各个元素进行比较。其次，DOM遍历逻辑不太正确，因为.sticker_wrapper不是h4的父级，因此单独使用closest()是行不通的。您需要获取最接近的div父级，然后是同级.sticker_wrapper。试试这个：

var names = ["Title1", "Title2", "Title3"];
var sticker = '<div class="product"><ul><li><div class="sticker"><img src="sticker.png"></div></li></ul></div>';

$(document).ready(function () {
  $('h4').each(function() {
    var text = $(this).text().trim();
    if (names.indexOf(text) != -1)      
      $(this).closest('div').prev('.sticker_wrapper').append(sticker);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sticker_wrapper"></div>
<div>
  <h4>Title1</h4>
</div>
<div class="sticker_wrapper"></div>
<div>
  <h4>Title Foo</h4>
</div>
<div class="sticker_wrapper"></div>
<div>
  <h4>Title3</h4>
</div>

请注意，在上面的代码中使用indexOf()在数组中查找匹配项，而不是显式循环。

根据商品标题添加图片

1 个答案: