каждая функция внутри каждой функции

Question

My html:

<div class="wrapper">
  <div class="objects">House, Cat, Dog, Car</div>
</div>
<div class="wrapper">
  <div class="objects">House, Cat, Car</div>
</div>
<div class="wrapper">
  <div class="objects">Cat, Dog</div>
</div>

Мой сценарий:

$('.wrapper > .objects').each(function() {

    var objects = $(this).text();
    var objectsSplit = objects.split(',');

    // console.log(objectsSplit);

    $(this).empty(); // remove old content

    $.each(objectsSplit, function(index, value) {
        $('.wrapper > .objects').append("<div>" + value + "</div>");
    });

});

Я хочу обернуть каждый "объект" в div и удалить ",".

Что я хочу:

<div class="wrapper">
  <div class="objects">
    <div>House</div>
    <div>Cat</div>
    <div>Dog<div>
    <div>Car</div>
  </div>
</div>
<div class="wrapper">
  <div class="objects">
    <div>House</div>
    <div>Cat</div>
    <div>Car</div>
  </div>
</div>
// and so on ...

С помощью моего скрипта я могу сохранить их все в массиве, но часть "$.each(objectsSplit, function(index, value) ... "не работает - скрипт вылетает. В чем моя ошибка?

Answer 1

Вы можете сохранить текущий элемент и добавить к нему следующее:

$('.wrapper > .objects').each(function() {
  const currentEl = this
  var objects = $(this).text();
  var objectsSplit = objects.split(',');

  // console.log(objectsSplit);

  $(this).empty(); // remove old content

  $.each(objectsSplit, function(index, value) {
      $(currentEl).append("<div>" + value + "</div>");
  });

});

.wrapper {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="objects">House, Cat, Dog, Car</div>
</div>
<div class="wrapper">
  <div class="objects">House, Cat, Car</div>
</div>
<div class="wrapper">
  <div class="objects">Cat, Dog</div>
</div>

Answer 2

Эта проблема возникает из-за того, что вы пытаетесь добавить новые элементы div к каждому $('.wrapper > .objects') внутри текущего objects, который вы зацикливаете. Вы можете исправить это, кэшируя текущий $(this) как:

var $this = $(this);

и затем используя этот jquery объект для добавления как:

$this.append("<div>" + value + "</div>");

Вместо выполнения:

$('.wrapper > .objects').append("<div>" + value + "</div>");

DEMO:

$('.wrapper > .objects').each(function() {
    var $this = $(this);
    var objects = $this.text();
    var objectsSplit = objects.split(',').map(s => s.trim());
    $this.empty(); // remove old content
    $.each(objectsSplit, function(index, value) {
        $this.append("<div>" + value + "</div>");
    });
});

.wrapper > .objects { border:2px solid green; margin: 5px; padding:5px 10px;}
.wrapper > .objects > div { background-color:#EEE;margin-bottom: 5px; padding:4px 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="objects">House, Cat, Dog, Car</div>
</div>
<div class="wrapper">
  <div class="objects">House, Cat, Car</div>
</div>
<div class="wrapper">
  <div class="objects">Cat, Dog</div>
</div>