как разбить блок на отдельные блок javascript

Question

Как разбить блок на отдельные блок:

<span class="razmers">43,44,45</span>

Нужно разбить на:

<span class="razmers">
  <span class="razmer">43</span>
  <span class="razmer">44</span>
  <span class="razmer">45</span>
</span>

Вот так если делать, разбивает только на один блок

var tags =$(".product-razmer").find(".razmers").text();
    var re = /\s*,\s*/;
    var tagList = tags.split(re);
for (key in tagList) {
var item = tagList[key];
$(".razmers").append('<span class="razmer"></span>').text(item);
}

Answer 1

$(".razmers").each((i, e) => {
  var tags = $(e);
  var tagList = tags.text().split(',');

  tags.text('');
  for (const v of tagList) {
    tags.append(`<span class="razmer">${v}</span>`);
  }
});

span {
  color: red;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="razmers">40,41,42</div>
<div class="razmers">43,44,45</div>

Answer 2

Потому что $(".razmers").append('').text(item); — здесь, когда добавляете тег через append, вы хотели бы потом в этот же тег добавить .text(item) а jQuery думает иначе - он возвращает всё тот же ".razmers", чей текст заменяется на item, стирая добавленный тег.

$(".sizes").each(function() {
  let numbers = $(this).text().match(/\d+/g) || []; // (*1)
  $(this).html( numbers.map(n => '<span class="size">' + n + '</span>') ); // (*2)
});

.size { display: inline-block; border: 1px solid orange; padding: 5px; margin: 5px; }

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

<span class="sizes">43,44,45</span><br>
<span class="sizes">36,46,47</span>

(*1) .match(/\d+/g) — Достанет все числа из строки в виде массива. Или, вернет null если ничего не найдет. Чтобы дальше не было ошибки, для этого предусмотрен || "или" пустой массив.

(*2) Во-первых, после map() на выходе получается массив вида
["43", "44", "45"]

Во-вторых, сам не знал:
Если в jQuery-.html() передать массив вместо строки, он сам соберет из неё строку)

Если без jQ, написать там this.innerHTML = [1, 2, 3] — между элементами останутся запятые. Чтобы избавиться от них, после map можно было бы добавить .join("");

БЛОГ НА HUSL

как разбить блок на отдельные блок javascript

Ответы (2 шт):