javascript - 在 jQuery Mobile 中使用 $.each 和 wrapInner() 时遇到问题

Question

我正在尝试遍历元素列表并将它们包装在链接标签中。但是，我的列表显示与我想要的不同。

这是它的样子：http: //jsfiddle.net/eMexU/

HTML

<div id="list" data-role="listview">
    <li><a href="http://www.google.com/">Item 1</a></li>
    <li><a href="http://www.google.com/">Item 2</a></li>
    <li><a href="http://www.google.com/">Item 3</a></li>
    <li><a href="http://www.google.com/">Item 4</a></li>
</div>

这是我使用 $.each 和 wrapInner() 时的样子：http: //jsfiddle.net/zpFDa/1/

HTML

<div id="list" data-role="listview">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</div>

JS

$("#list li").each(function () {
    $(this).wrapInner('<a href="http://google.com/"></a>')
});

Answer 1

做到这一点的唯一方法是用li新的替换现有的，然后调用.listview('refresh')应用样式/增强标记。

演示

$("#list li").each(function () {
  var text = $(this).text();
  $(this).replaceWith('<li><a href="http://google.com/">' + text + '</a></li>')
});

$('#list').listview('refresh');