Как вставить каждые два li в ul с помощью javascript

Question

Я разрабатываю приложение html5, используя backbone.js. Формат html включает элементы списка. Этикетки li элементов поступают из веб-сервиса. Я населяю li элементов динамически.

Я беру все ярлыки в коллекции и отправляю их в Шаблон. Теперь я хочу вставить каждые 2 li элементов в ul элементов динамически. Как я могу это достичь?

Мой HTML выглядит как

<div class="auto_data"> 
<li> 
<label style="color:white">Name<sup>*</sup></label><input type="text"> 
</li> 
<li> 
<label style="color:white">Age<sup>*</sup></label><input type="text"> 
</li> 
<li><label style="color:white">Gender<sup>*</sup></label><input type="text"> 
</li> 
<li> 
<label style="color:white">salutation<sup>*</sup></label><input type="text"> 
</li> 
</div> 

Теперь я хочу, чтобы вставить уль элемент для каждых двух Li элементов

<ul> 
<li>....</li> 
<li>....</li> 
</ul> 

Теперь Иам письма на мой взгляд как

_.each(this.questionReferenceCollection.models,function(model){ 
             uiControl=model.get('UIControlType'); 
             if(i==0){ 
             $('.auto_data',self.el).append('<ul>'); 
             } 
             i++; 

             $('.auto_data',self.el).append(new questions({ 
                     model:model, 
                     controlType:uiControl 
                     }).render().el);/* this will render li template */ 
             if(i==2){ 
             $('.auto_data',self.el).append('</ul>'); 
             i=0; 
             } 

             }); 

Но из-за асинхронного вызова

это приводит к

<ul></ul> 
    <li>...</li> 
    <li>...</li> 
    <ul></ul> 
    <li>...</li> 
    <li>...</li> 
    <li>...</li> 

Я хочу

<ul> 
<li>..</li> 
<li>..</li> 
</ul> 

Пожалуйста, предложите мне.

Answer 1

Вы можете перебрать коллекцию в своем шаблоне, например. В этом цикле вы можете использовать оператор modulo (%), чтобы определить, может ли текущий индекс делиться на 2. Если это так, вы добавляете закрытие ul и открытие ul в этой точке.

Answer 2

Редактировать: Обновлен несколько более простым подходом.

Это немного сложнее, чем кажется на первый взгляд, но с помощью некоторых творческих селекторы, код, чтобы сделать это не так уж плохо в конце концов:

var $autoDataDiv = $(".auto_data"); 

while ($autoDataDiv.children("li").length > 0) { 
    var $newUL = $("<ul />"); 

    $newUL.append($autoDataDiv.children("li:first")); 
    if ($autoDataDiv.children("li:first")) { 
     $newUL.append($autoDataDiv.children("li:first")); 
    } 

    $autoDataDiv.append($newUL);   
} 

В принципе, то, что она делает это выбирает <li> элементы, которые являются непосредственными дочерними элементами «auto_data» <div>, а затем перемещают их парами в только что созданные элементы <ul>, а затем добавляют эти элементы к исходному родителю <div>.

«Самая сложная» часть кода - это то, что вы используете $autoDataDiv.children("li:first") дважды при перемещении <li> в новый <ul>. Причина этого заключается в том, что когда <li> перемещается в новый <ul>, он больше не является непосредственным дочерним элементом «auto_data» <div> и, следовательно, больше не возвращается селектором. Итак, когда первый <li>, который переместится на <ul>, он исчезает из группы выбора, а следующий <li> перемещается в свое место, как тот, который возвращается $autoDataDiv.children("li:first").

В любом случае, это должно сработать для вас. , , Дайте знать, если у вас появятся вопросы.