javascript - 无法创建 DIV 的多个版本

Question

下面我有一些 jQuery 代码，它尝试将多个文件夹图标放置在图库 Pane 的顶部。 AJAX 调用检索文件夹信息，该信息只是一个字符串，如下所示:

"boots,50,120,socks,50,160,shoes,50,200,"

在本例中，存在三个文件夹:“boots”位于 top=50、left=120、socks 等。

对于返回数据中的每个文件夹，代码尝试创建一个包含文件夹图标的 div，根据 AJAX 调用中的数据定位它并将其附加到 DOM。但有些事情是非常错误的，因为我正在生成多个具有相同名称和相同偏移量的文件夹。

$.post('ajax.php', {op : 'get_folders'},       
  function(responseTxt, statusTxt, xhr) {  
    var folderDiv;
    var folders =     responseTxt.split(",");

    for (i=0; i<folders.length; i=i+3){
      name=folders[i];
      posTop=folders[i+1];
      posLeft=folders[i+2];

      folderDiv = '<div class=openclosed_folder_icon>' +
                  '<img class="folder_icon" src="images/folder_closed.png"  alt="closed folder"  />' +
                  '<div class="folder_name" >name</div>' + 
                  '</div>';

      $(folderDiv).find('.folder_name').text(name);
      $(folderDiv).attr({'id' : name});
      $(folderDiv).draggable(folder_icon_dragOps)
                  .css({'cursor'     : 'pointer',
                        'position'   : 'absolute',
                        'top'        : posTop,
                        'left'       : posLeft
                       }) 
                  .appendTo('#galleryHeader');
  } 
});

有人发现这段代码有问题吗？

Answer 1

每次执行$(folderDiv)时，您都会重新创建 DOM 元素并创建新的 jQuery 对象。您需要调用 $(folderDiv) 一次，并将其保存到变量中。

var folderDiv = '<div class=openclosed_folder_icon>' +
       '<img class="folder_icon" src="images/folder_closed.png"  alt="closed folder"  />' +
       '<div class="folder_name">'+name'+</div>' + 
        '</div>';
var $folderDiv = $(folderDiv); // Convert this into a DOM element, and save the jQuery object

// Do actions on the saved jQuery object, so that you are editing the *same* DOM element

// You can chain together these calls
$folderDiv.find('.folder_name').text(name).attr({'id' : name});
$folderDiv.draggable(folder_icon_dragOps).css({
    'cursor':'pointer',
    'position': 'absolute',
    'top': posTop,
    'left': posLeft
}).appendTo('#galleryHeader');