javascript - 使用纯 JavaScript 交错附加元素

Question

我将使用检索到的远程 json 数据将注释附加到 <ul class="chat" id="comments_section">

返回 json 数据，如下所示:

rtndata = [
  {
    username: Jordan,
    message: 123,
  },
  {
    username: Kobe,
    message: 456,
  },    
]

实现想法:

rtndata.forEach(function (comment, index) {
    if index == EvenNumber:
      append_comment_div_with_Even_Number_format;
    else :
    append_comment_div_with_Odd_Number_format;
});

最终 DOM 结构应如下所示，

属性 left 和 right 应在评论 div 模板中交替使用。

我们可以在纯 js 库中使用任何模板技术吗？ (backbone.js, react.js, underscore.js 的任何一个库都可以优雅地完成这项工作吗？)

谢谢。

预期结果

<ul class="chat" id="comments_section">
            <li class="left.clearfix">
              <span class="pull-left chat-img">
                <img src="http://graph.facebook.com/Jordan/picture">
              </span>
              <span class="pull-left msg">
                123
              </span>
            </li>
            <li class="right.clearfix">
              <span class="pull-right chat-img">
                <img src="http://graph.facebook.com/Kobe/picture">
              </span>
              <span class="pull-right msg">
                456
              </span>
            </li>
</ul>

Answer 1

从表面上看，您正在尝试通过 js 添加 css 类来调整替代元素的样式。

您可以使用 css :nth-child 选择器在没有 js 的情况下处理此问题:

li:nth-child(odd) {

}
li:nth-child(odd) span.msg{

}
li:nth-child(even) {

}
li:nth-child(even) span.msg{

}

如果您必须添加类(也许您正在使用 bootstrap)，您应该能够使用 underscore 的 template 方法执行如下操作:

<ul class="chat" id="comments_section">
  <% _.each(comments, function(comment, i) { %>
    <li class="<%= i%2==0? 'left' : 'right' %> clearfix">
      <span class="pull-<%= i%2==0? 'left' : 'right' %> chat-img">
                <img src="http://graph.facebook.com/Kobe/picture">
              </span>
      <span class="pull-<%= i%2==0? 'left' : 'right' %> msg">
                456
              </span>
    </li>
    <% }); %>
</ul>