cada función dentro de cada función

Pepe:

Mi 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>

Mi script:

$('.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>");
    });

});

Quiero envolver cada "objeto" en un div y quitar el "".

Lo que quiero:

<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 ...

Con mi guión puedo almacenarlas todas en una matriz, pero el "$.each(objectsSplit, function(index, value) ..."trabajo doesn`t parte -. Los accidentes de guión Cuál es mi fracaso?

palaѕn:

Este problema sucede porque usted está tratando de añadir los nuevos divs a cada uno $('.wrapper > .objects'), dentro de la corriente objectsse recorre de nuevo. Lo puede solucionar mediante el almacenamiento de la corriente $(this)como:

var $this = $(this);

y a continuación, utilizando este objeto jquery para append como:

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

En vez de hacer:

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

MANIFESTACIÓN:

$('.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>