2012-05-07 3 views
0

Когда у меня не было класса или чего-то, что проходило и обрабатывалось в синтаксисе xml, но теперь я пытаюсь его стилизовать, используя jQuery mobile. Я должен создать список таким образом, чтобы стили были применены jquery после загрузки. Но это только загрузка первого результата в списке. Если я выхожу из $ (this) .text(), я получаю 5 ответов, которые являются правильными. Но следующий код не работает.jQuery mobile create table не корректно проходит через xml

$(document).ready(function() { 

          $.ajax({ 
            type: 'GET', 
            url: 'test.xml', 
            dataType: 'xml', 
            success: function(xmlDoc) { 
            var $xml = $(xmlDoc); 
            $xml.find('FirstName').each(function() { 
                   $("#list").html('<li ><a href="acura.html">' + $(this).text() + '</a></li>'); 
                   $("#list").listview('refresh'); 
                   }); 

            } 
            }); 



      }); 

Heres HTML-:

<body> 
     <div data-role="page"> 

      <div data-role="header"> 
       <h1>Deep Web</h1> 
      </div><!-- /header --> 

      <ul id="list" data-role="listview"></ul><!-- /content --> 

      <div data-role="footer"> 
       <h4>Footer content</h4> 
      </div><!-- /footer --> 

     </div> 
    </body> 

ответ

1
$("#list").html('<li ><a href="acura.html">' + $(this).text() + '</a></li>'); 

В здесь вы устанавливаете новый HTML в каждом цикле,

изменить его так,

$("#list").append('<li ><a href="acura.html">' + $(this).text() + '</a></li>'); 
1

.html(SONETHING) это то же самое, что и ing .empty().append(SOMETHING). И что вам нужно, это буфер, который вы добавите в DOM и добавите его сразу, потому что это дорогостоящая процедура.

      $.ajax({ 
           type: 'GET', 
           url: 'test.xml', 
           dataType: 'xml', 
           success: function(xmlDoc) { 
            var $xml = $(xmlDoc), 
             out = [];//create array to buffer output 
            $xml.find('FirstName').each(function() { 

             //add this index to the buffer array 
             out.push('<li ><a href="acura.html">' + $(this).text() + '</a></li>'); 
            }); 

            //select the #list element only once, replace the HTML all at once, then refresh 
            $("#list").html(out.join('')).listview('refresh'); 

           } 
         }); 

Посмотрите, как массив используется для хранения связки строк HTML, которые собираются вместе. Кроме того, если вы хотите только добавить новые элементы списка, а не перезаписывать существующие, вы можете заменить .html() на .append().

Документы для .append(): http://api.jquery.com/append

Смежные вопросы