2013-07-31 5 views
0

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

'institute.js'에는 무엇이 있습니까? – Blender

+0

기본적으로 institute_json의 데이터와 같습니다. { "institute": [0123] , { "ID": "3", "이름": "안게 반테 MECHANIK"} { "ID": "4", "이름": "안게 반테 Physik"} { "ID" "5" "이름": "Anorganische 싶게 Analytische 케미"} { "ID": "6", "이름": "Architekturbezogene 쿤스트 (IAK)"}, { "ID" "7", "이름" "Automobilwirtschaft U INDUSTRIELLE 히프 프로덕션"} ] 은} – lornz

+0

음, 뭔가 옳지 않다. JS 콘솔에서 뭐라고 말합니까? – Blender

답변

2

요소를 목록 뷰에 동적으로 추가 할 때 렌더링 후에 새로 고침해야합니다.

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

고마워. 그게 효과가있어! – lornz

0

당신이 우리에게 institute.js

을의 내용을 줄 수 있습니다 코드는 다음과 같습니다

올바른 스타일을하지 않는 코드입니다

이 시도 :

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

institute.js의 내용은 var institute_json과 동일합니다. { "기관" [ { "ID": "1", "이름": "Adaptronik 싶게 Funktionsintegration"} { "ID", "2", "이름": "분석 싶게 대수" } { "ID": "3", "이름": "안게 반테 MECHANIK"} { "ID": "4", "이름": "안게 반테 Physik"} { "ID" "5 ","이름 ":"Anorganische 싶게 Analytische 케미 "} {"ID ":"6 ","이름 ":"Architekturbezogene 쿤스트 (IAK) "}, {"ID ""7 ","이름 " : "Automobilwirtschaft u Industrielle Produktion"} – lornz

+0

코드 줄에서 "기관"을 제거하려고 시도 했습니까 : $ .each (data.institute, function (i, el) { –

+0

예 , 그건 내 목록에 하나의 요소를 준다 : "undefined" – lornz