Question

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

我曾多次尝试更改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

我得到的输出格式与预期格式不正确

Answer 1

我建议你以稍微简单的方式组装标记，然后这应该没有麻烦：

＆＃13;

<!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>

＆＃13;

pageinit

＆＃13;

而不是pagecreate您还可以使用jpg - 在这里您会找到一个非常受欢迎的答案来解释差异：https://stackoverflow.com/a/10542821/4845566

请注意：

您的图片文件的扩展名是否正确？也许应该是jpeg或{{1}}，由您决定。

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

      }

在jQuery mobile

2 个答案: