如何創建用於動態創建UI的jQuery代碼

Question

我想要jQuery代碼在div標籤中創建下面的UI動態名稱和時間是不同的。

我有從json格式的數據庫的名稱和日期，我想從使用jquery的數據創建菜單。

<div data-role="content"> 
       <ul data-role="listview" data-divider-theme="b" data-inset="false"> 
        <li data-role="list-divider" role="heading"></li> 
        <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()"> 
         Verinoff,James <span class="patient-list_txt2-red">04/13/2011 12:12</span></a> 
        </li> 
        <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()"> 
         Parker,Tollin <span class="patient-list_txt2-yellow">04/13/2011 12:10</span> </a> 
        </li> 
        <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()"> 
         Michael,John <span class="patient-list_txt2-green">04/13/2011 12:04</span></a> 
        </li> 
        <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()"> 
         Jonah <span class="patient-list_txt2-yellow">04/13/2011 12:03</span></a> </li> 
        <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()"> 
         Jaffee,Dillon <span class="patient-list_txt2-red">04/13/2011 12:02</span></a> 
        </li> 
        <li data-theme="c"><a data-transition="slide" onclick="javascript:navigation_message_details()"> 
         Denny Stephen <span class="patient-list_txt2-blue">04/13/2011 12:01</span></a> 
        </li> 
       </ul> 
      </div> 

Answer 1

試試這個代碼，例如這可能是您的JSON（你把從AJAX調用服務器）：

var yourJson = { "data" : [{"name" : "Paolo", "dateTime" : "04/13/2011 12:01"}] }; 

然後你就可以在它迭代：

$.each(yourJson.data, function(i) 
{ 
    var li = $('<li/>') 
    .addClass('yourCssClass') 
    .attr('data-theme', 'c') 
    .appendTo(list); 

    var aaa = $('<a/>') 
    .html(yourJson.data[i].name + " <span class='patient-list_txt2-blue'>" + yourJson.data[i].dateTime + "</span>") 
    .attr('data-transition', 'slide') 
    .appendTo(li); 
}); 

這是小提琴：http://jsfiddle.net/pbBav/

Answer 2

$.each(json, function() { 
    $("div[data-role=content] ul") 
    .append(
     $("<li>").data('theme', 'c') 
      .append($("<a>").data('transition', 'slide') 
       .click(navigation_message_details) 
       .text(this.name) 
       .append($("<span>").addClass('patient-list_txt2-' + this.class) 
       .text(this.date) 
      ) 
      ) 
     ) 
    ; 
}); 

我不知道在哪裏的類的顏色是從哪裏來的，所以我只是認爲這是json的一部分。