javascript - 将每个 div 附加到自己的父级

Question

我通过从后端(我不接触)提取数据，使用 jQuery 动态创建 DOM 结构。目前后端在页面上输出 4 个文本元素。我有一个 each 循环，它根据页面上有多少元素来创建匹配框 div。故事的寓意，我需要将每个元素放在自己单独的 div 中。当前第一个 div 包含所有 4 个元素，第二个包含 3 个，第三个包含 2 个，第四个包含 1 个。它的外观示例:

---------------------
|Item1              |
|Item2              |
|Item3              |
|Item4              |
---------------------
---------------------
|Item1              |
|Item2              |
|Item3              |
|                   |
---------------------
---------------------
|Item1              |
|Item2              |
|                   |
|                   |
---------------------
---------------------
|Item1              |
|                   |
|                   |
|                   |
---------------------

下面是 jquery:

  $('.sequencing').append('<div class="sequence_boxes sortable sortable_area"></div>');

  $('.sequence_option').each(function(i) {
    $('<div class="box"></div>').appendTo($('.sequence_boxes'));
    $(this).appendTo($('.box')); 
  });

Answer 1

问题是您将 this 附加到 $('.box')，它将匹配 所有 框，因此您'将获得克隆的元素。

相反，只需附加到您刚刚创建的那个:

$('.sequencing').append('<div class="sequence_boxes sortable sortable_area"></div>');
$('.sequence_option').each(function(i) {
    $('<div class="box"></div>').appendTo($('.sequence_boxes')).append(this);
    // We're doing the append here ----------------------------^
});

或者没有链接更清晰一些:

$('.sequencing').append('<div class="sequence_boxes sortable sortable_area"></div>');
$('.sequence_option').each(function(i) {
    var box = $('<div class="box"></div>');
    box.appendTo($('.sequence_boxes'));
    box.append(this);
});

您可能还想只查找 .sequence_boxes 一次，而不是重复查找，也许为了优化浏览器的工作您可以只附加 .sequence_boxes 完成填写后:

var boxes = $('<div class="sequence_boxes sortable sortable_area"></div>');
$('.sequence_option').each(function(i) {
    $('<div class="box"></div>').appendTo(boxes).append(this);
});
boxes.appendTo($('.sequencing'));