如何使用javascript在ul中插入每两个li答案

【问题标题】：how to insert every two li s in ul using javascript如何使用javascript在ul中插入每两个li
【发布时间】：2013-07-08 13:35:18
【问题描述】：

我正在使用backbone.js 开发一个html5 应用程序。 html 的格式包括列表元素。 li 元素的标签来自网络服务。我正在动态填充li 元素。

我将收集一个集合中的所有标签并发送到 Template。现在我想在ul元素中动态插入每2个li元素。我该如何实现呢？

我的 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 元素

<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>

请给我建议。

【问题讨论】：

你能提供一些代码给我们看看吗？之前的 HTML、您想要添加的数据以及您希望在最后拥有的 HTML 将非常有帮助。您已经尝试过的任何 JS 都会有所帮助。
@talemyn 我在上面提供了代码..

标签： javascript backbone.js

【解决方案1】：

例如，您可以循环访问模板中的集合。在该循环中，您可以使用模运算符 (%) 来确定当前索引是否可被 2 整除。如果是，则在该点添加一个结束 ul 和一个开始 ul。

【讨论】：

【解决方案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);        
}

基本上，它所做的是选择“auto_data”<div> 的直接子元素 <li>，然后将它们成对移动到新创建的 <ul> 元素中，然后将这些元素附加到原始父元素 @ 987654325@.

代码中“最棘手”的部分是在将<li> 移动到新的<ul> 时，您使用了两次$autoDataDiv.children("li:first")。这样做的原因是，当<li> 被移动到新的<ul> 中时，它不再是“auto_data”<div> 的直接子代，因此不再由选择器返回。因此，当第一个 <li> 移到 <ul> 时，它会从选择组中消失，而下一个 <li> 会移入它的位置，就像 $autoDataDiv.children("li:first") 返回的那个位置一样。

无论如何，这应该适合你。 . .如果您有任何问题，请告诉我。

【讨论】：