Question

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

我正在收集集合中的所有标签并发送给模板。现在我想动态地在li元素中插入每2 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元素

<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

例如，您可以在模板中循环遍历该集合。在该循环中，您可以使用模运算符（％）来确定当前索引是否可以被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);        
}

基本上，它的作用是选择“{1}}元素，它们是”auto_data“<li>的直接子元素，然后将它们成对移动到新创建的<div>元素中，然后附加那些元素元素到原始父<ul>。

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

无论如何，这应该适合你。。。如果您有任何问题，请与我联系。

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

2 个答案: