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

发布于 2024-09-15 18:53:55 字数 2405 浏览 2 评论 0原文

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

亲切的问候,

库拉姆·贾维德

I am creating a Adobe Air application with jQuery support. However, the recursive function that I have closes the tag first and writes the data afterwards.

My code is,

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>');

 } 
}

The reply I get is,

   <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>

This is wrong, in that list5, list 6 are childs of list 4, so they should be in its div.

I am really struggling. It seems that the jquery is calling append before the recursive function. Is there a way around this.

Kind Regards,

Khuram Javaid

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

拥抱没勇气 2024-09-22 18:53:55

.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 参数递归地传递到函数中,因为这就是您想要的附加到,并将子元素附加到that,而不是直接附加到#todoLists

.append() is used for full elements, you can't add partial strings or just closing tags. There are many ways to go about fixing this, I'll show a minimal change version here:

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);
 } 
}

This just passes the element you're creating as the parent parameter into the function recursively, since that's what you want to append to, and appends the child elements to that instead of #todoLists directly.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文