Question

我正在创建一个支持jQuery的Adobe 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。有没有办法解决这个问题。

亲切的问候，

Khuram Javaid

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。

JQuery在数据之前追加结束标记

1 个答案: