用纯粹的javascript交错附加元素

Question

我要将<ul class="chat" id="comments_section">的评论附加到检索到的远程json数据

返回这样的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;
});

Finnaly DOM结构应如下所示，

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

我们可以在纯js lib中使用任何模板技术吗？ （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），你应该能够使用下划线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>

Answer 2

这是一种方法：

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

var ul = document.getElementById('comments_section');
rtndata.forEach(function(comment, index) {
    var even = (index % 2 === 0);

    var li = document.createElement('li');
    li.className = (even ? 'left.clearfix' : 'right.clearfix');

    var span1 = document.createElement('span');
    span1.className = (even ? 'pull-left' : 'pull-right') + ' chat-img';

    var img = document.createElement('img');
    img.src = 'http://graph.facebook.com/' + comment.username + '/picture';

    var span2 = document.createElement('span');
    span2.className = (even ? 'pull-left' : 'pull-right') + ' msg';
    span2.innerHTML = comment.message;


    span1.appendChild(img);
    li.appendChild(span1);
    li.appendChild(span2);

    ul.appendChild(li);
});

输出：

由于您没有那么多元素，我们可以创建一些元素并进行设置。如果你有很多，第二种方法是创建一个html模板并进行查找替换。