如何在listview中使用jquery动态显示列表分隔符？

Posted 2023-05-09

【中文标题】如何在listview中使用jquery动态显示列表分隔符？

【英文标题】：How to display the list dividers dynamically using jquery in listview?

【发布时间】：2013-08-13 09:27:19

【问题描述】：

我正在动态使用data-role="list-divider" 在列表视图中显示类别数据。与list-divider 一起，我正在显示有关列表视图中每个项目的描述。但这些描述来自每个项目的相关文件。当我显示带有list-divider 的列表视图以及描述时，我遇到了问题，然后列表视图显示为所有分隔符应首先组合，然后在显示带有描述的列表项下方。如何正确显示带有描述的列表视图。

http://jsfiddle.net/yC8VS/2/

$("#list").append('<li data-role="list-divider">' + section + '</li>');
$(this).children().each(function () 
   var content = $(this).text();
   var order = $(this).attr("order");
   var seq = order + '' + $(this).attr('order');
   var file = $(this).attr('file');
   $.mobile.activePage.append('<div id="files" style="display: none"></div>');
   $('#files').load(file, function (data) 
     var txt = $(data).find('p').text();
     $("#list").append('<li><a href="" class="style1" data-sequence="s' + seq + '" file="' + file + '"><h2>' + content + ' </h2><p class="description">' + txt + '</p></a></li>');
     $("#list").listview('refresh');
   );
);

提前致谢。

【参考方案1】：

$('#files').load(file, function (data)

是问题所在。这是一个异步函数，这意味着它不会阻塞。因此，这些部分是在 load() 调用添加内容的函数之前添加的。

使用带有 async:false 的 ajax 加载数据，然后列表正确显示。

---

[编辑 1]

http://jsfiddle.net/uECUY/

展示了一些使异步调用同步的工作。很难它使用绑定功能，这可能不适用于所有平台（https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Function/bind）

...您还可以更改超时功能的延迟，因为 50 毫秒是一个非常短的间隔，这会导致更高的负载...

---

[编辑 2]

为没有绑定功能的浏览器添加绑定功能，如上文章链接所述：

if (!Function.prototype.bind) 
    Function.prototype.bind = function (oThis) 
        if (typeof this !== "function") 
            // closest thing possible to the ECMAScript 5 internal IsCallable function
            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
        

        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP = function () ,
            fBound = function () 
                return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
                aArgs.concat(Array.prototype.slice.call(arguments)));
            ;

        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();

        return fBound;
    ;

---

[编辑 3]

进一步改进了sn-p，可以在没有绑定功能的情况下工作。

http://jsfiddle.net/uECUY/4/

【讨论】：

我在“#files”中加载数据..但是我必须在 ajax 中提到这个“#files”。

如果将 $.ajax() 与 async:false 一起使用，则需要手动将数据添加到“#files”。例如 $("#files").append();

如果添加上述绑定代码后仍然无法正常工作，则需要使用 $.ajax() 或者在开始添加列表元素之前需要加载数据。

另外，我注意到您多次添加“#files” div，这会导致多个对象具有相同的 id...这可能会导致进一步的问题...

你不回复了，现在是什么状态？