Question

我通过从后端（我不接触）提取数据，使用jQuery动态创建DOM结构。目前，后端在页面上输出4个文本元素。我有一个每个循环，基于页面上有多少元素来创建匹配的框div。故事的道德，我需要将每个元素放在他们自己独立的div中。目前第一个div包含所有4个项目，第二个包含3个，第三个包含2个和第4个包含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'));

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

1 个答案: