javascript - 如何 .wrap() 从 ajax 调用返回的元素

Question

更新:答案适用于 FILTER 而不是 FIND....我不知道为什么。

这把我难住了。我到处搜索，但没有找到这个具体问题，所以我发布它。

我有一个应用程序，我可以在其中填写一些表单，然后通过 jquery ajax 提交到 php 文件，然后取回数据。当我取回数据时，我尝试用另一个 div 包装每个 .contentarea 类，但我无法让它工作。

这就是我所拥有的

$(document).delegate('.moduleform', 'submit', function(event) {
event.preventDefault();

formData = $(this).serialize();
$.ajax({
type: "POST",
dataType: "text",
url: "layouts/" + folder + "/make-layout.php",
data: formData
}).done(function(data) {

$(data).filter('.contentarea').each(function(){

var html = $(this).html();
$(html).wrap('<div class="contentarea_container" data-module="freeform"></div>');

});

$('#container').append(data);
$('#load').dialog('close');
$('#loadContent').empty();

});
});

当我 console.log($(this));它看起来像控制台中的一个对象。当我 console.log($(this).html());它看起来像 HTML。但由于某种原因，我无法弄清楚如何用另一个 div 包装每个 .contentarea。

我认为这与将数据转换为 HTML 或类似的内容有关。我能够定位数据变量中的项目，但由于某种原因我无法让换行工作。请帮忙!

Answer 1

.wrap 直接在 DOM 上工作。因此，您首先将 data 附加到 #container，然后调用 .wrap，如下所示:

$(document).delegate('.moduleform', 'submit', function(event) {
  event.preventDefault();

  formData = $(this).serialize();
  $.ajax({
    type: "POST",
    dataType: "text",
    url: "layouts/" + folder + "/make-layout.php",
    data: formData
  }).done(function(data) {
    var $data = $(data).appendTo('#container');
    $data.find('.contentarea').wrap('<div class="contentarea_container" data-module="freeform"></div>');
    $('#load').dialog('close');
    $('#loadContent').empty();
  });
});

演示:

var data = '<div><div class="contentarea">c</div></div><div><div class="contentarea">d</div></div>';
var $data = $(data).appendTo('#container');
$data.find('.contentarea').wrap('<div class="contentarea_container" data-module="freeform"></div>');
$('#out').text($('#container').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div>
    <div class="contentarea">a</div>
  </div>
  <div>
    <div class="contentarea">b</div>
  </div>
</div>
<div id="out"></div>