CODEWITHSUNDEEP
jquery
Andy Thomas
Andy Thomas

Reputation: 79

How to add class for per string after comma?

I tried to get the color of variable of woocommerce and meet the problem, I want to add html tag for each string after comma.

The code:

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

I want to add html tag for each string as bellow:

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

Upvotes: 1

Views: 109

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

To achieve this you could use a combination of replaceWith(), to overwrite the original p element, and map() to build multiple p elements from the comma separated list of colour names in the text of the original element, something like this:

$('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>

Upvotes: 2

Related Questions