在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')以应用样式/增强标记。

  

<强> Demo

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

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