jQuery appendTo列表樣式

我對jQuery/HTML5有點新東西，所以我遇到了一些問題。希望你能幫助。jQuery appendTo列表樣式

我正在加載本地的json文件，並希望將它的項目添加到列表中。這工作得很好。但是，列表不使用jQuery樣式？

我試了一下，沒有加載json文件，而是直接把數據放在代碼中，它工作。什麼可能是我的問題？

這是不正確的樣式代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>tuBS Energie App</title> 
    <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/> 
    <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 

</head> 
<body> 
    <div id="tasksPage" data-role="page"> 
     <div data-role="header" data-position="fixed"> 
      <a href="#" data-role="button">Zurück</a> 
      <h1>tuBS Energie App</h1> 
     </div> 

     <div data-role="content"> 
      <h3>Institut für Nachrichtentechnik</h3> 
      <ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul> 
     </div> 

     <div data-role="footer" data-position="fixed"> 
      <a href="#" data-role="button">Info</a> 
     </div> 

    </div> 

    <script type="text/javascript" charset="utf-8"> 
      $(function() 
      { 
       $(document).ready(function(){ 
        $.getJSON("institute.js",function(data) { 
         $.each(data.institute,function(i,el){ 
          $("<li><a href='#'>"+el.id+". "+el.name+"</a> </li>").appendTo("#taskList"); 
         }); 
        }); 
       }); 
      }) 
    </script> 
</body> 
</html>

這裏是這給了我正確的造型

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>tuBS Energie App</title> 
    <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/> 
    <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 

</head> 
<body> 
    <div id="tasksPage" data-role="page"> 
     <div data-role="header" data-position="fixed"> 
      <a href="#" data-role="button">Zurück</a> 
      <h1>tuBS Energie App</h1> 
     </div> 

     <div data-role="content"> 
      <h3>Institut für Nachrichtentechnik</h3> 
      <ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul> 
     </div> 

     <div data-role="footer" data-position="fixed"> 
      <a href="#" data-role="button">Info</a> 
     </div> 

    </div> 

    <script type="text/javascript" charset="utf-8"> 
      var institute_json = 
      [ 
       {"id":"1","name":"Adaptronik und Funktionsintegration"}, 
       {"id":"2","name":"Analysis und Algebra"}, 
       {"id":"3","name":"Angewandte Mechanik"}, 
       {"id":"4","name":"Angewandte Physik"}, 
       {"id":"5","name":"Anorganische und Analytische Chemie"}, 
       {"id":"6","name":"Architekturbezogene Kunst (IAK)"}, 
       {"id":"7","name":"Automobilwirtschaft u Industrielle Produktion"}, 

      ]; 

      $.each(institute_json,function(i,el) 
      { 
       $("<li><a href='#'>"+el.id+". "+el.name+"</a></li>").appendTo("#taskList"); 
      }); 
    </script> 
</body> 
</html>

來源

2013-07-31 lornz

'institute.js'中有什麼？ – Blender

它與institute_json中的數據基本相同。 {「institute」： [「id」：「1」，「name」：「Adaptronik und Funktionsintegration」}， {「id」：「2」，「name」：「Analysis und Algebra」} ， {「id」：「3」，「name」：「Angewandte Mechanik」}， {「id」：「4」，「name」：「Angewandte Physik」}， {「id」，「name」：「Anorganische und Analytische Chemie」}， {「id」：「6」，「name」：「Architekturbezogene Kunst（IAK）」}， {「id」：「7」，「name」「Automobilwirtschaft u Industrielle Produktion」} ] } – lornz

嗯，有些事情是不對的。你的JS控制檯說什麼？ – Blender

將元素動態添加到列表視圖中後，您需要刷新它。

$("ul").listview("refresh");

來源

2013-07-31 11:06:01

謝謝。這樣可行！ – lornz

，你能不能給我們institute.js

內容的代碼

試試這個：

$.getJSON("institute.js",function(data) { 
      $.each(data,function(i,el)

來源

2013-07-31 10:49:26

institute.js的內容與var institute_json中的內容相同。 { 「研究所」： [ { 「ID」：「1」，「名稱」：「Adaptronik UND Funktionsintegration」}， { 「ID」：「2」，「名稱」：「分析UND代數」 }， {「id」：「3」，「name」：「Angewandte Mechanik」}， {「id」：「4」，「name」：「Angewandte Physik」}， {「id」：「5 「name」：「Anorganische und Analytische Chemie」}， {「id」：「6」，「name」：「Architekturbezogene Kunst（IAK）」}， {「id」：「7」：「Automobilwirtschaft u Industrielle Produktion」} ] } – lornz

您是否嘗試刪除代碼行中的「institute」：$ .each（data.institute，function（i，el）{ –

是，這給了我列表中的一個元素：「undefined」 – lornz

jQuery appendTo列表樣式

回答

相關問題