在jQuery mobile中将文件中的值添加到列表视图中
我必须从文本文件中检索值并使用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
This is my list view where I want to load content dynamically from file
$(document).on("pageinit", "#pageOne", function(){ $.get("info.txt",function(data){ var items=data.split(','); for(var i=0;i<items.length;){ $("#header ul").append(''+''); creating image element which is a thumb nail in list view var img = $('').attr({ 'src': 'img/'+items[i], 'width': 50 }).appendTo('#list'); creating heading element to list view $('#list').append(''+items[i+1]+'
'); creating para element to list view $('#list').append(''+items[i+2]+'
'+''+' '); i=i+3; } I have tried refresh for list view $('#list').listview('refresh'); }); });
这是一个预期的输出,我希望我的列表viewlook
我得到的输出格式与预期的格式不正确
我建议你以稍微简单的方式组装标记,然后这应该没有麻烦:
// 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 += ''; html += ''; //creating image element which is a thumb nail in list view html += ''; //creating heading element to list view html += '' + items[i + 1] + '
'; //creating para element to list view html += '' + items[i + 2] + '
'; html += ''; html += ' '; i = i + 3; } // refresh list view $("#list").append(html).listview('refresh'); } $(document).on("pageinit", "#pageOne", function(){ getData(); });
我试过这个并且有效
$(document).on("pageinit", "#pageOne", function(){ $.get("info.txt",function(data){ var items=data.split(','); for(var i=0;i "+items[i+1]+"
"+items[i+2]+"
"); i=i+3; $('#header ul').listview('refresh'); }