добавление span к тексту в div с использованием jQuery

Question

У меня есть что-то вроде этого:

 <div class="SomeClass"> 
 <label> something </label>
 14 
 </div>
  <div class="SomeClass"> 
 <label> something </label>
 8
 </div>

Используя jQuery, я хочу включить каждое число в диапазон, чтобы я мог стилизовать его независимо от целого div.

Итак, я хочу, чтобы он стал:

 <div class="SomeClass"> 
 <label> something </label>
 <span> 14 </span>
 </div>
  <div class="SomeClass"> 
 <label> something </label>
 <span> 8 </span>
 </div>

Потратив много времени на поиск, я попробовал это, и я не думал, что это полезно поделиться:

  $(" [class='SomeClass'] ").each(function() {
    $(this).clone().children().remove().end().text().append('<span>');
    $(this).clone().children().remove().end().text().prepend('</span>');
  });

Я новичок ie с jQuery и все еще учусь, поэтому, пожалуйста, будьте более внимательны, прежде чем голосовать за меня.

Answer 1

Вы можете клонировать элемент label во временную переменную, затем удалить его и получить текст внутри элемента SomeClass. Как это:

$('.SomeClass').each(function () {
  var $self = $(this);
  
  var label = $self.find('label');
  
  var _label = label.clone();
  
  label.remove();
  
  var text = $self.text().trim();
  
  $self.html(_label).append(`<span>${text}</span>`);
});

$('.SomeClass').each(function () {
  console.log(this.outerHTML);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="SomeClass"> 
 <label> something </label>
 14 
 </div>
  <div class="SomeClass"> 
 <label> something </label>
 8
 </div>