我从本地存储中提取JSON数据,并使用grep根据所选ID筛选出所需的项目。然后,我将过滤后的集合转换为"LI"项目,然后将它们附加到UL容器中。UL容器的数据插入属性设置为"是"。当我将listview("刷新")应用于"UL"时,不会应用插入外观(第一个和最后一个项目的圆角。
这是我的代码:
var categoryId = 1;
var data = JSON.parse(... data from localstorage...);
//FILTER OUT DATA FOR THE SELECTED CATEGORY
data = $.grep(data, function(el, i)
{
if (el.CategoryId == categoryId)
return el;
});
//BUILD LI ELEMENTS FROM FILTERED LIST
var categoryListItems = [];
$.each(data, function(i, item)
{
categoryListItems.push('<li data-category-id="' + item.CategoryId + '" data-id="' + item.ListId + '">' + item.ListName + '</li>');
});
$('ul#CategoryList li').remove();
$('ul#CategoryList').append(categoryListItems.join('')).listview("refresh");
从生成的HTML来看,CSS类"ui corner-top"one_answers"ui corner bottom"在刷新后不会被应用。这些类绕过第一个和最后一个li元素的角,以获得插入的外观。
关于为什么这些课程没有得到应用,有什么想法吗?
尝试使用此
$('ul#CategoryList').append(categoryListItems.join('')).listview("refresh", true);
在列表视图刷新后添加此代码
$("#pageid").trigger("create");//pageid is the id of the page which has the listview.
这将强制重新构建页面,并重新应用所有jquery移动样式。