Question

我需要帮助，以通过获取数据变量将wrap 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/

Answer 1

Working fiddle 。

您可以使用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" />

如何通过获取数据变量将wrap div添加到并附加到默认内容？

1 个答案: