Мне нужна помощь, чтобы добавить обертку div к содержимому по умолчанию из получения переменной данных.

Содержание по умолчанию:

<div class="wrapper">
<div class="list"></div>
</div>
<input type="button" id="read" value="ADD CONTENT" />

При нажатии кнопки:

$.get("read.php", function(data) {
$(".list").append(data).wrap('<div class="item"><div class="icon"></div></div>'");
});
});

Данные read.php:

<div class="container"><div class="row"><div class="col">COL</div></div></div>
<div class="container"><div class="row"><div class="col">COL-1</div><div class="col">COL-2</div></div></div>

Как я могу сделать так:

<div class="wrapper">
<div class="list">
<div class="item"><div class="icon"></div><div class="container"><div class="row"><div class="col">COL</div></div></div></div>
<div class="item"><div class="icon"></div><div class="container"><div class="row"><div class="col">COL-1</div><div class="col">COL-2</div></div></div></div>
</div>
</div>

Мой код jsfiddle: https://jsfiddle.net/vj0u3p84/

1
webmaster 25 Мар 2019 в 19:52

1 ответ

Лучший ответ

Рабочая скрипка .

Вы можете использовать filter() для перебора контейнеров, а затем обернуть их следующим образом:

$("#read").click(function() {

  var data = `<div class="container"><div class="row"><div class="col">COL</div></div></div>
    <div class="container"><div class="row"><div class="col">COL-1</div><div class="col">COL-2</div></div></div>`;

  $(data).filter('.container').each(function() {
    $(".list").append($('<div class="item"><div class="icon"></div></div>').append($(this)));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="list"></div>
</div>

<input type="button" id="read" value="ADD CONTENT" />
0
Zakaria Acharki 25 Мар 2019 в 17:03