將每個div附加到自己的父對象

Question

我使用jQuery通過從后端提取數據來動態創建DOM結構（我不接觸）。 當前，后端在頁面上輸出4個文本元素。 我有一個每個循環，該循環基於頁面上的多少個元素來創建匹配的框div。 故事的寓意是，我需要將每個元素放置在各自獨立的div中。 當前，第一個div包含所有4個項目，第二個div包含3，第三個div包含2，第四個div包含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'));