Change unordered list items into spans with jQuery-CodePudding

I have two unordered lists inside a div with a known class. I need to change the list items in the first list to spans with the class "time". Next I would like to change the second list items to spans with the class "frequency". Finally I would like to remove the <ul> tags leaving only the spans behind in the div. Just like:

<div id="training-labels">
<ul>
<li>30 mins</li>
</ul>

<ul>
<li>Annually</li>
<li>First 2 weeks</li>
</ul>
</div>

to this

<span >30 mins</span>
<span >Annually</span>
<span >First 2 weeks</span>

I have managed to change the contents of each list into spans:

$('#training-labels ul:nth-of-type(1) li').wrapInner('<span  />').contents();
$('#training-labels ul:nth-of-type(2) li').wrapInner('<span  />').contents();

But have not been successful stripping out the ul and li tags, leaving only the spans behind.

Is this the best approach or is there a better way to achieve this with JQuery?

I have set up a Fiddle here

$('#training-labels ul:nth-of-type(1) li').wrapInner('<span  />').contents();

$('#training-labels ul:nth-of-type(2) li').wrapInner('<span  />').contents();

.time {
  color: green;
}

.frequency {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="training-labels">
  <ul>
    <li>30 mins</li>
  </ul>

  <ul>
    <li>Annually</li>
    <li>First 2 weeks</li>
  </ul>
</div>

CodePudding user response：

You can do following:

$('#training-labels ul:nth-of-type(1) li').wrap('<span />').contents().unwrap();

$('#training-labels ul:nth-of-type(2) li').wrap('<span />').contents().unwrap();

$('#training-labels ul:nth-of-type(1) span').unwrap();
$('#training-labels ul:nth-of-type(1) span').unwrap();

.time {
  color: green;
}

.frequency {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="training-labels">
  <ul>
    <li>30 mins</li>
  </ul>

  <ul>
    <li>Annually</li>
    <li>First 2 weeks</li>
  </ul>
</div>

JQuery wrap() method:

The .wrap() function can take any string or object that could be passed to the $() factory function to specify a DOM structure.

JQuery unwrap() method:

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

Note: Since no class is attached to the parent div (with the id training-labels), both the spans are in the same row.

CodePudding user response：

If we can be sure all ul1 has times and all ul2 has frequencies

const $div = $('#training-labels');
const $uls = $('ul', $div); // save
$div.empty(); // clear
$uls.each(function(i, ul) {
  $("li", ul).each(function(j, li) {
    $(`<span time" : "frequency" }">${li.textContent}</span><br/>`)
      .appendTo($div)
  });
});

.time {
  color: green;
}

.frequency {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="training-labels">
  <ul>
    <li>30 mins</li>
  </ul>
  <ul>
    <li>Annually</li>
    <li>First 2 weeks</li>
  </ul>
</div>

Otherwise

const $div = $('#training-labels')
$('ul:nth-of-type(1) li', $div).wrapInner('<span  />').contents();
$('ul:nth-of-type(2) li', $div).wrapInner('<span  />').contents();
$div.html(function() { 
  return $div.find("span")
    .map(function() { return this.outerHTML })
    .get()
    .join("<br/>"); // or space or something else
});

.time {
  color: green;
}

.frequency {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="training-labels">
  <ul>
    <li>30 mins</li>
  </ul>
  <ul>
    <li>Annually</li>
    <li>First 2 weeks</li>
  </ul>
</div>

CodePudding user response：

You can use the jQuery replaceWith() Function for that: https://api.jquery.com/replacewith/

CodePudding user response：

My approach

let $div = $('#training-labels');
let $time = $('ul:nth-of-type(1) li', $div).clone().wrapInner('<span  />').contents();
let $freq = $('ul:nth-of-type(2) li', $div).clone().wrapInner('<span  />').contents();
$div.replaceWith($().add($time).add($freq));

This is not dissimilar from the unwrap solution except that it is not so tightly tied to the tag structure. The clone part isn't strictly required but it means that there is actually only one update to the DOM which happens after the entire replacement has been generated.