ListView jQuery Mobile中有些奇怪的东西

Question

如果我写这个：

 <ul data-role="listview" data-inset="true">
            <li>
                <a href="#">
                    <img src="PIC/999.jpeg">
                    <h2>Google Chrome</h2>
                    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
                </a>
                <a href="#">Some Text</a>
            </li>
            <li>
                <a href="#">
                    <img src="PIC/999.jpeg">
                    <h2>Mozilla Firefox</h2>
                    <p>Firefox is a web browser from Mozilla. Released in 2004.</p>
                </a>
                <a href="#">Some Text</a>
            </li>
        </ul>

我看到漂亮的设计

但我需要移动网络：

<script>
        function XX() {

            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET", "1.xml", false);
            xmlhttp.send();
            xmlDoc = xmlhttp.responseXML;

            $("#ZIBI").empty();

            var ALL;
            var ID,Fname, Lname, Phone,Car;

            var x = xmlDoc.getElementsByTagName("men");
            for (i = 0; i < x.length; i++) {
                try{ID = x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue;}
                catch (err) { ID = "0";}
                try{Fname = x[i].getElementsByTagName("Fname")[0].childNodes[0].nodeValue;}
                catch (err) { Fname = "0"; }
                try{Lname = x[i].getElementsByTagName("Lname")[0].childNodes[0].nodeValue;}
                catch (err) { Lname = "0"; }
                try{Phone = x[i].getElementsByTagName("S_phone")[0].childNodes[0].nodeValue;}
                catch (err) { Phone = "0"; }
                try { Car = x[i].getElementsByTagName("car")[0].childNodes[0].nodeValue; }
                catch (err) { Car = "0"; }
                ALL = 
                      '<li>' +
                      '<a href="#">' +
                      '<img src="PIC/' + ID + '.jpeg">' +
                      '<p class="nam">' + Fname + " " + Lname + '</p>' +
                      //'<p class="des">' + Lname + '</p>' +
                      '<p class="phn">' + Phone + '</p>' +
                      '<p class="crr">' + Car + '</p>' +
                      '<hr>' +
                      '</a>' +
                      '</li>' 

                $("#ZIBI").append(ALL);
            }
        }
    </script>


 <ul data-role="listview" data-inset="true" id="ZIBI" data-autodividers="true" data-filter="true" ></ul>  

我看到了这个丑陋的设计

Answer 1

来自jqueryMobile docs：

更新列表：

如果您将项目添加到列表视图，则需要在其上调用refresh()方法来更新样式并创建添加的任何嵌套列表。例如：

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

请注意，refresh（）方法仅影响追加到列表的新节点。这是出于性能原因而完成的。刷新过程将忽略已增强的任何列表项。这意味着如果您更改已经增强的列表项的内容或属性，则不会反映这些内容或属性。如果要更新列表项，请在调用refresh之前将其替换为新标记。