将文件中的值添加到 jQuery mobile 中的列表视图

Question

我必须使用 jquery mobile 从文本文件中检索值并附加到列表视图中。
我能够从文本文件中检索值，但没有得到预期的输出。

我已经尝试过多次更改 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>

这是一个预期的输出，我想要我的列表视图

我得到的输出格式不正确

Answer 1

我建议您以稍微简单的方式组装标记，这样应该可以轻松工作：

// 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，由你决定。

Answer 2

我试过了，效果很好

$(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');

      }