-2

我正在使用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>

请给我建议。

4

2 回答 2

0

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

于 2013-07-10T14:47:02.793 回答
0

编辑：用稍微简单的方法更新。

这比最初看起来要复杂一些，但是通过使用一些创造性的选择器，完成它的代码最终并不算太糟糕：

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>的元素中，然后将这些元素附加到原始 parent <div>。

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

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

于 2013-07-11T15:11:49.070 回答