jQuery - 为每个对象创建新的 div？答案

【问题标题】：jQuery - Create new div for each object?jQuery - 为每个对象创建新的 div？
【发布时间】：2016-02-16 00:50:39
【问题描述】：

我有一个 html 代码块

<div class="modal-comment-content">
      <ul class="list-inline">
        <li><a href="#"><img src="/defaultpic.jpg" width="100" class="img-circle"></a></li>
        <li>
          <ul class="list-unstyled">
            <li><a href="#" class="comment_username">John D.</a></li>
            <li class="comment_created_at">~ 4 hours ago</li>
          </ul>
        </li>
      </ul>
      <p class="comment_comment">This is a completely random sentence. This is the second sentence. Closing sentence right here.</p>
      <hr>
</div>

我有一个迭代对象数组的 for 循环。

for (var i = 0; i < json.length; i++)
    {
      var user = json[i].user.first_name + ' ' + json[i].user.last_name.charAt(0) + '.';
      var comment     = json[i].comment;
      var created_at  = json[i].created_at;

    }

我想将 html 代码块用作数组对象每次迭代的“模板”。关于如何完成的任何想法？问候，

【问题讨论】：

标签： javascript jquery html json for-loop

【解决方案1】：

如果您使用 Angular JS，总会有 NG 重复标签并将 HTML 代码（这是您的模板）绑定到模型。这是文档：

https://docs.angularjs.org/api/ng/directive/ngRepeat

如果你只是在做快速破解，并且对使用框架不感兴趣，你总是可以做这样的事情

// create the template variable using your div content and some special tokens
var template = '<div class="modal-comment-content">
  <ul class="list-inline">
    <li><a href="#"><img src="%USER_IMAGE%" width="100" class="img-circle"></a></li>
    <li>
      <ul class="list-unstyled">
        <li><a href="#" class="comment_username">%USERNAME%</a></li>
        <li class="comment_created_at">%CREATED_AT%</li>
      </ul>
    </li>
  </ul>
  <p class="comment_comment">%COMMENT%</p>
  <hr>
</div>';

var jLen  = json.length;
var parentDiv = $('#parentDiv');

// create and attach a new 'Div' to some parent
// using the template, replacing the tokens with dynamic values from the list.
for (var i = 0; i < jLen; ++i)
{
  var user = json[i].user.first_name + ' ' + json[i].user.last_name.charAt(0) + '.';
  var comment     = json[i].comment;
  var created_at  = json[i].created_at;
  var divContent = template.replace('%COMMENT%', comment).replace('%CREATED_AT%', created_at).replace('%USERNAME%', user);

  parentDiv.append(divContent);
}

【讨论】：

这可以用纯jquery实现吗？我以前从未见过这样做过。您能解释一下 %COMMENT% 在 var 模板中的含义吗？
它是纯 jQuery，%% 字符串只是在模板中查找/替换值的一种方式。没什么特别的，它只是通常不会在字符串中使用的东西。如果您愿意，可以使用“@&COMMENT^%”。
正如 Beaverus 所说，它只是一个命名法，我选择让“替换”变得容易。你可以选择任何你喜欢的，或者使用连接（可以说更快，但是更难阅读代码）

【解决方案2】：

有几种方法，具体取决于您的项目规范：

HTML5 模板

如果您知道您的用户属于capable browsers，您可以使用新的 HTML 模板功能。

JS 模板

如果您的项目足够大，并且您知道自己会经常使用这种代码，您可以使用 Handlebars 之类的东西以一种简单且可维护的方式处理模板。

jQuery DOM 字符串

最快（也是最脏）的方法是创建一个函数，该函数返回一个构建的 HTML 字符串，然后您可以将它附加到 DOM：

function buildCard(person) {
    return '<div class="card"><h2>'+person.name+'</h2><p>'+person.details+'</p></div>';
}

【讨论】：