jquery - 如何为逗号后的每个字符串添加类？

Question

我尝试获取 woocommerce 变量的颜色并遇到问题，我想在逗号后为每个字符串添加 html 标签。

代码:

<p class="color">white, green</p>

我想为每个字符串添加 html 标签，如下所示:

<p class="color">white</p>
<p class="color">Green</p>

Answer 1

要实现此目的，您可以使用 replaceWith() 的组合来覆盖原始 p 元素，并使用 map() 来构建原始元素文本中以逗号分隔的颜色名称列表中的多个 p 元素，如下所示:

$('p').replaceWith(function() {
  return $(this).text().split(',').map(function(t) {
    return `<p class="color">${t.trim()}</p>`;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="color">white, green</p>