Javascript 无法创建DIV的多个版本

下面我有一些jQuery代码，它试图将多个文件夹图标放置在库窗格的顶部。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');
  } 
});

$.post（'ajax.php'，{op:'get_folders'}，
函数（responseText、statusTxt、xhr）{
var folderDiv；
var folders=responseText.split（“，”）；
对于（i=0；i每次执行
$（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');

var folderDiv=''+
'' +
''+名称'+'+
'';
var$folderDiv=$（folderDiv）；//将其转换为DOM元素，并保存jQuery对象
//对保存的jQuery对象执行操作，以便编辑*相同*的DOM元素
//你可以把这些电话连在一起
$folderDiv.find（'.folder_name'）.text（name）.attr（{'id'：name}）；
$folderDiv.draggable（文件夹图标拖动）.css({
'光标'：'指针'，
'位置'：'绝对'，
“顶部”：后期，
“left”：posLeft
}).appendTo（“#galleryHeader”）；
每次执行
$（folderDiv）
，您正在创建DOM元素并创建一个新的jQuery对象。我第一次看到来自服务器端的元素的位置是一个长字符串的一部分…顺便说一句，您是否可以共享复制到目前为止的内容所需的最小HTML/CSS？请小心
响应文本中的尾随逗号
。你的
文件夹
数组将有一个第10个元素，一个空白字符串。谢谢。是的，它有，我通过更改for循环来处理它，直到我不知道你的代码如何让我得到三个单独的文件夹div（“boots”、“socks”和“shoes”）在DOM中。你的
name
变量包含什么？不是每个名称吗？是的。但是如果你的所有代码都在for循环中，那么每次都会执行。是的，是的。每次都会创建一个新的div。这不是你想要的吗？是的，这就是我想要的：三个单独的文件夹。你是说在做$（folderDiv）。find（）和$（folderDiv）.attr（）和$（folderDiv）.draggable（）每个过程都会重新创建DOM元素三次，这会导致问题吗？