將文件中的值添加到jQuery手機中的列表視圖

我必須從文本文件中檢索值並使用jquery mobile在listview中追加。
我能夠從文本文件檢索值，但我沒有得到預期的輸出。將文件中的值添加到jQuery手機中的列表視圖

我已經嘗試了很多次改變jQuery語法，但它沒有奏效。

我的文本文件有以下數據：

apple.jpe,apple,healthy, 
banana.jpe,banana,good, 
cherry.jpe,cherry,tasty, 
cranberry.jpe,cranberry,sour, 
grape.jpe,grape,wine, 
orange.jpe,orange,citric

<body> 
    <div data-role="page" id="pageOne"> 
    <div data-role="content" id="header"> 

     This is my list view where I want to load content dynamically from file 
     <ul data-role="listview" data-inset="true" id="list"> 
     </ul> 
    </div> 
    </div> 
    <script> 

    $(document).on("pageinit", "#pageOne", function(){ 
    $.get("info.txt",function(data){ 

     var items=data.split(','); 

     for(var i=0;i<items.length;){ 
     $("#header ul").append('<li>'+'<a href="#">'); 
     creating image element which is a thumb nail in list view 
     var img = $('<img />').attr({ 
      'src': 'img/'+items[i], 
      'width': 50 
     }).appendTo('#list'); 
     creating heading element to list view 
     $('#list').append('<h2>'+items[i+1]+'</h2>'); 

     creating para element to list view 

     $('#list').append('<p>'+items[i+2]+'</p>'+'</a>'+'</li>'); 
     i=i+3; 

     } 
     I have tried refresh for list view 
     $('#list').listview('refresh'); 
    }); 
    }); 
    </script> 
</body>

這是一個預期的輸出，我想我的名單viewlook

我得到的輸出是不以正確格式如預期的那樣

來源

2017-07-09 Praneeth Kumar

我建議你裝配標記在一個稍微簡單的方式，那麼這應該毫不費力的工作：

// sample data 
 
var items = [ 
 
    "apple.jpe","apple","healthy", 
 
    "banana.jpe","banana","good", 
 
    "cherry.jpe","cherry","tasty", 
 
    "cranberry.jpe","cranberry","sour", 
 
    "grape.jpe","grape","wine", 
 
    "orange.jpe","orange","citric" 
 
]; 
 

 

 
function getData() { 
 
    /* 
 
    here you should use your ajax call: 
 
    $.get("info.txt",function(data){ 
 
    var items=data.split(','); 
 
    
 
    */ 
 
    var html = ""; 
 
    for (var i = 0; i < items.length;) { 
 
    html += '<li>'; 
 
     html += '<a href="#">'; 
 
     //creating image element which is a thumb nail in list view 
 
     html += '<img width="50" src="img/' + items[i] + '">'; 
 
     //creating heading element to list view 
 
     html += '<h2>' + items[i + 1] + '</h2>'; 
 
     //creating para element to list view 
 
     html += '<p>' + items[i + 2] + '</p>'; 
 
     html += '</a>'; 
 
    html += '</li>'; 
 
    i = i + 3; 
 
    } 
 
    // refresh list view 
 
    $("#list").append(html).listview('refresh'); 
 
} 
 

 
$(document).on("pageinit", "#pageOne", function(){ 
 
    getData(); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 
<body> 
 
    <div data-role="page" id="pageOne"> 
 
    <div role="main" class="ui-content"> 
 
     <ul data-role="listview" data-inset="true" id="list"> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

代替pageinit您還可以使用pagecreate - 在這裏你會發現一個高度讚賞答案，解釋了區別：https://stackoverflow.com/a/10542821/4845566

的說明旁白：

是您的圖像文件的擴展名是否正確？也許應該是jpg或jpeg，由您決定。

來源

2017-07-10 20:34:33 deblocker

-1

我已經嘗試這樣做，它的工作

$(document).on("pageinit", "#pageOne", function(){ 
    $.get("info.txt",function(data){ 
    var items=data.split(','); 

     for(var i=0;i<items.length;){ 

     $("#header ul").append("<li> <a href='#'> <img src=img/"+items[i]+"/> 
<h2>"+items[i+1]+"</h2><p>"+items[i+2]+"</p></a></li>"); 

     i=i+3; 
     $('#header ul').listview('refresh'); 

     }

來源

2017-07-11 22:57:11

'追加（）'和'刷新（）'循環（如張貼在我的答案）的外面是確實快，在這裏看到：https：//開頭learn.jquery.com/performance/append-outside-loop/ – deblocker

將文件中的值添加到jQuery手機中的列表視圖

回答

相關問題