每个功能内的每个功能

Question

我的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

之所以发生此问题，是因为您试图将新的div附加到每个$('.wrapper > .objects')上，并在当前objects内循环。您可以通过缓存当前的$(this)来解决此问题，例如：

var $this = $(this);

 
$('.wrapper > .objects').each(function() {
    var $this = $(this);
    var objects = $this.text();
    var objectsSplit = objects.split(',');
    $this.empty(); // remove old content
    $.each(objectsSplit, function(index, value) {
        $this.append("<div>" + value + "</div>");
    });
});
<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>