동적으로 jQuery Mobile 목록보기 내용 채우기

Question

현재 데이터베이스에서 많은 양의 데이터를 표시하기 위해 jQuery 모바일에서 동적으로 생성 된 목록보기를 사용하고 있습니다. 이 콘텐트의 대부분은 데이터베이스에 있고 페이지가로드되기 전에 django에 의해 생성되지만, HTML5 localStorage를 사용하여 저장되는리스트 뷰 요소에 삽입하고 싶은 내용도 있습니다.

결과적으로이 데이터는 django 백엔드가 아닌 javascript를 통해서만 액세스 할 수 있습니다. 일부 자바 스크립트를 pagebeforecreate 이벤트에 바인딩하는 것을 상상합니다. 이 후, 나는 어떻게 든 ul (나는 id을 가지고있다) 내에있는 li 엘리먼트들을 모두 반복 할 필요가있다.

그 후에는 약간 까다로워집니다. localStorage에서 정보를 가져온 Javascript에 배열이 이미로드되어 있다고 가정합니다. 전화는 classNames입니다. 각 li에 classNames 배열의 색인을 지정하여 li이 텍스트로 수신해야하는 사용자 지정 속성 기간 색인을 할당했습니다.

예를 들어이 쿼리에 의해 강화되기 전에 같은 모양으로 주어진 목록의 내용에 대한

UPDATE.

<li data-role="list-divider">Regular Schedule/li> 
    <li periodindex="5" type="schedule"> 
     <h1 class="ui-li-heading">6</h1> 
     <p class="ui-li-maintext"><i>class name goes here</i></p> 
     <p class="ui-li-aside"><b>7:30</b> - <b>8:30</b></p> 
     <p class="ui-li-count">60</p> 
    </li> 
    <li periodindex="3" type="schedule"> 
     <h1 class="ui-li-heading">6</h1> 
     <p class="ui-li-maintext"><i>class name goes here</i></p> 
     <p class="ui-li-aside"><b>8:45</b> - <b>9:50</b></p> 
     <p class="ui-li-count">65</p> 
    </li> 
    <li periodindex="7" type="schedule"> 
     <h1 class="ui-li-heading">6</h1> 
     <p class="ui-li-maintext"><i>class name goes here</i></p> 
     <p class="ui-li-aside"><b>10:00</b> - <b>12:00</b></p> 
     <p class="ui-li-count">120</p> 
    </li> 
    <li periodindex="0" type="schedule"> 
     <h1 class="ui-li-heading">6</h1> 
     <p class="ui-li-maintext"><i>class name goes here</i></p> 
     <p class="ui-li-aside"><b>1:00</b> - <b>4:00</b></p> 
     <p class="ui-li-count">180</p> 
    </li> 

나는 주어진 모든 li 요소를 통해 루프 방법이 필요하고, li 요소의 periodindex 속성에 의해 지정된 인덱스에있는 클래스 이름의 배열 객체의 내용으로 "클래스 이름이 간다"의 내용을 대체합니다. 또한 목록의 첫 번째 li 요소는 목록의 제목이므로 무시해야합니다. LI 요소가 페이지에 표시로 classNames 배열을 가정

이

Answer 1

같은 순서에,이 시도 :

OPS 응답에 따라 업데이트

for (var i = 0; i < classNames.length; i++) { 
    $("#schedule li[periodindex='" + i + "']").find(".ui-li-maintext").html("<i>" + classNames[i] + "</i>"); 
}