时间戳

首页 > 解决方案 > JQuery - 如果 div 文本包含存储在数组中的相同文本，则将该文本包装在新 div 中

jquery - JQuery - 如果 div 文本包含存储在数组中的相同文本，则将该文本包装在新 div 中

问题描述

我有一个包含品牌名称的具有相同类的 div 列表，我已经能够让它通过 div 运行并将所有品牌名称（文本）存储在一个数组中，如下所示：

var brandList = $('.brand').map(function(){
  return $(this).text();
}).get();

console.log(brandList);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="brand">Brand 1</div>
<div class="brand">Brand 2</div>
<div class="brand">Brand 3</div>

然后，我在同一页面上有一个产品提要拉入产品，但是品牌名称和产品名称是同一提要字段的一部分，我需要在前端将它们分开以使它们的样式不同。

.productListItem {
display: inline-block;
width:49%;
text-align: center;
}

.productListItem img {
width:100%;
}
<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 1 Product 1</div>
</div>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 2 Product 2</div>
</div>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 3 Product 3</div>
</div>

我一直在用一个简单的脚本手动输入我想隔离的每个品牌文本来做到这一点（效果很好）：

$('.productListItem .name').html(function (index, text) {
    this.innerHTML = text.replace("Brand 1 ", "<div class='brandName'>Brand 1 </div>");
});

然而，手动操作很容易被忽略，我想保留所有 JQuery 以保持站点一致性。似乎品牌列表存在于页面上，并且我已设法将它们存储在一个数组中，我想将其自动化，因此对于页面上的每个产品，它会查看产品名称 div 然后循环遍历数组，如果品牌名称在数组中匹配产品名称的一部分，它将通过在产品名称周围包裹一个 div 来隔离产品名称中匹配的品牌名称（这样我就可以对其进行不同的样式设置）。

我试图弄清楚这一点，但我仍在学习，这似乎超出了我的知识库，因为我什至还没有接近（过去将品牌存储在数组中），我也尝试过寻找答案但是没有最大的运气找到我能理解并适应工作的东西。

提前谢谢了

标签： jqueryhtmlcss

解决方案

尝试这个 ：

$(document).ready(function() {
  // Array with the brand you want to wrap a div around
  var brandArray = ["Brand 1", "Brand 2", "Brand 3"];
    
  // You select all your ".productListItem .name" and loop through
  $('.productListItem .name').html(function (index, text) {
    // You keep your current element in a var for after
    var element = this;
    
    // Now you loop through your brand array
    $.each(brandArray, function(key, value) {
      // If the html of your current element includes the brand name of the array
      // You can use "text.includes(value)" too but no IE support according to :
      // https://stackoverflow.com/questions/1789945/how-to-check-whether-a-string-contains-a-substring-in-javascript
      if (text.indexOf(value) !== -1) {
        // You replace the brand by the brand in a div
        $(element).html(text.replace(value, "<div class='brandName'>"+value+"</div>"));
      }
    });
  });

});
.productListItem {
  display: inline-block;
  width:49%;
  text-align: center;
}

.productListItem img {
  width:100%;
}

.brandName {
  display: inline-block;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 1 Product 1</div>
</div>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 2 Product 2</div>
</div>

<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 3 Product 3</div>
</div>

<!-- I added this block so you can see it doesn't change -->
<div class="productListItem">
  <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" />
  <div class="name">Brand 4 Product 4</div>
</div>

我添加了一些 CSS，.brandName以便您可以看到您的元素现在有一个带有此类的 div（红色的那个）

是你要找的吗？

推荐阅读