CODEWITHSUNDEEP
jquery
ScreamQueen
ScreamQueen

Reputation: 204

Wrap comma separated text on page in span tags with JQuery

I have a number of comma separated values in divs on my page like this:

<div class="frequency">
Within 48 hours,Annually
</div>

<div class="frequency">
First 2 weeks,Annually
</div>

<div class="frequency">
Annually
</div>

I am trying to wrap each value in a span tag. I have managed to do this, but it will only work on the first one, and then repeats the same values for the rest:

var frequencylabels = $('.frequency').html().split(',');
$('.frequency').empty().append(frequencylabels.map(i => `<span class="label">${i}</span>`));
$('.frequency span').unwrap();

How can I achieve this output?

<span class="label">Within 48 hours</span><span class="label">Annually</span>

<span class="label">First 2 weeks</span><span class="label">Annually</span>

<span class="label">Annually</span>

Here is a JSFiddle demo

Upvotes: 2

Views: 482

Answers (1)

4b0
4b0

Reputation: 22323

Loop your class and use split() / append() method inside loop.

Example:

$('.frequency').each(function(index, element) {
  var frequencylabels = $(this).text().split(',');
  $(this).empty().append(frequencylabels.map(i => `<span class="label">${i}</span>`));
  $('.frequency span').unwrap();
});
.label {
  background-color: green;
  margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frequency">
  Within 48 hours,Annually
</div>

<div class="frequency">
  First 2 weeks,Annually
</div>

<div class="frequency">
  Annually
</div>

Upvotes: 1

Related Questions