javascript - JQuery 在数据之前附加结束标记

Question

我正在创建一个支持 jQuery 的 Adob​​e Air 应用程序。但是，我的递归函数首先关闭标签，然后写入数据。

我的代码是，

function displayTodoItems(id)
{
 id = parseInt(id)

 if(!id)
  $("#todoLists").empty();

 var list = fetchTodoItems(id);
 if(list.data == null)
  return;
 var numRecords = list.data.length;  

 for (var i=0;i<numRecords;i++)
 {  
  dateObj = new Date(list.data[i].date_created);

  time = dateObj.getFullYear()+"-"+ String("0"+dateObj.getMonth()).slice(-2)+"-"+ String("0"+dateObj.getDate()).slice(-2)+" "+  String("0"+dateObj.getHours()).slice(-2)+":"+ String("0"+dateObj.getMinutes()).slice(-2);

   $('#todoLists').append('<div id="list'+list.data[i].id+'" class="listitem '+(id?'listitem-sub':'listitem-main')+'" style="background-color: #' + list.data[i].color + ';' +(list.data[i].color/2 < 0x7FFFFF?' color: #FFF;':'')+ '">'+time+ '<br>' + unescape(list.data[i].data)+ '</div>');
  //get child items
  displayTodoItems(list.data[i].id);
  $('#todoLists').append('</div>');

 } 
}

我得到的答复是，

   <div id="todoLists">
  <div id="list1" class="listitem listitem-main" style="background-color: #fff;">2010-07-07 21:01<br>
    Hello Bongo Sister</div>
  <div id="list2" class="listitem listitem-main" style="background-color: #dd9900;">2010-07-07 21:08<br>
    Umer Idiot Thinks that we are using Aptima. Not knowing that we call this Aptana</div>
  <div id="list3" class="listitem listitem-main" style="background-color: #654562; color: #FFF;">2010-07-07 21:42<br>
    asdf asdfa sdfasdf asdf </div>
  <div id="list4" class="listitem listitem-main" style="background-color: #7FFFFF;">2010-07-08 12:40<br>
    Umar is a naughty boy</div>
  <div id="list5" class="listitem listitem-sub" style="background-color: #222; color: #FFF;">2010-07-08 12:46<br>
    Hello Great Boy</div>
  <div id="list6" class="listitem listitem-sub" style="background-color: #000000; color: #FFF;">2010-07-10 20:07<br>
    Farrukh You Idjt</div>
  <div id="list7" class="listitem listitem-main" style="background-color: #FF5500;">2010-07-18 21:45<br>
    Testing new Item</div>
</div>

这是错误的，在列表 5 中，列表 6 是列表 4 的子级，因此它们应该位于其 div 中。

我真的很挣扎。看起来jquery在递归函数之前调用append。有没有办法解决这个问题。

亲切的问候，

库拉姆·贾维德

Answer 1

.append()用于完整元素，您不能添加部分字符串或仅添加结束标签。有很多方法可以解决这个问题，我将在这里展示一个最小的更改版本:

function displayTodoItems(id, parent)
{
 id = parseInt(id);
 parent = parent || $("#todoLists");

 if(!id) parent.empty();

 var list = fetchTodoItems(id);
 if(list.data == null)
  return;
 var numRecords = list.data.length;  

 for (var i=0;i<numRecords;i++)
 {  
  var dateObj = new Date(list.data[i].date_created),
      time = dateObj.getFullYear()+"-"+ String("0"+dateObj.getMonth()).slice(-2)+"-"+ String("0"+dateObj.getDate()).slice(-2)+" "+  String("0"+dateObj.getHours()).slice(-2)+":"+ String("0"+dateObj.getMinutes()).slice(-2),
      elem = $('<div id="list'+list.data[i].id+'" class="listitem '+(id?'listitem-sub':'listitem-main')+'" style="background-color: #' + list.data[i].color + ';' +(list.data[i].color/2 < 0x7FFFFF?' color: #FFF;':'')+ '">'+time+ '<br>' + unescape(list.data[i].data)+ '</div>')
                .appendTo(parent);         
  displayTodoItems(list.data[i].id, elem);
 } 
}

这只是将您创建的元素作为 parent 参数递归地传递到函数中，因为这就是您想要附加的内容，并将子元素附加到该 而不是直接#todoLists。