使用 Ajax 循环附加 div 类答案

【问题标题】：Append Div Class with Ajax Loop使用 Ajax 循环附加 div 类
【发布时间】：2016-03-22 12:59:48
【问题描述】：

我有一个 Ajax 脚本，它读取一个 XML 文件并将每个节点附加到一个带有 ID“链接”的 div 中。该脚本工作正常，但我想在“col-md-3”类中显示每个结果。

这是来自 Ajax 脚本的循环：

$(xml).find('ref').each(function () {
  // set thumbs and big image paths
  var thumbUrl = 'img/thumbs/';
  var bigUrl = 'img/';

  $('<a />')
  .append($('<img>').prop('src', thumbUrl + img).attr('alt', alt))
  .prop('href', bigUrl + img)
  .prop('title', title)
  .prop('alt', alt)
  .attr('data-gallery', '')
  .appendTo($('#links'));
});

结果如下：

<div id="links">
  <a href="img/apple.jpg" title="Apple" data-gallery="">
  <img src="img/thumbs/apple.jpg" alt="Apple"></a>

  <a href="img/orange.jpg" title="Orange" data-gallery="">
  <img src="img/thumbs/orange.jpg" alt="Orange"></a>
</div>

我想在列类“col-md-3”中显示每个图像链接，如下所示：

<div id="links">
  <div class="col-md-3">
    <a href="img/apple.jpg" title="Apple" data-gallery="">
    <img src="img/thumbs/apple.jpg" alt="Apple"></a>
  </div>

  <div class="col-md-3">
    <a href="img/orange.jpg" title="Orange" data-gallery="">
    <img src="img/thumbs/orange.jpg" alt="Orange"></a>
  </div>
</div>

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap-3

【解决方案1】：

尝试换行

$('#links a').wrap('<div class="col-md-3">');

https://jsfiddle.net/xwLmm1d0/1/

【讨论】：

【解决方案2】：

我会在插入 DOM 之前生成完整的 HTML 代码。它节省了资源，您还可以实际看到您插入的内容：

xml = $.parseXML( '<ref img="350x150" alt="Alt 1" title="Title 1"></ref>' );

var newItemHtml = '';
var thumbUrl = 'https://placehold.it/';
var bigUrl = 'https://placehold.it/';
var links = $('#links');

$(xml).find('ref').each(function(i) {
    var thisRef = $(this);
    var src = thumbUrl + thisRef.attr('img');
    var href = bigUrl + thisRef.attr('img');
    var alt = thisRef.attr('alt');
    var title = thisRef.attr('title');
    newItemHtml += '<div class="col-md-3">\n';
    newItemHtml += '    <a href="' + href + '" title="' + title + '" data-gallery="">\n';
    newItemHtml += '        <img src="' + src + '" alt="' + alt + '">\n';
    newItemHtml += '    </a>\n';
    newItemHtml += '</div>\n';
});

links.append(newItemHtml);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links"></div>

同样在this Fiddle。

【讨论】：

谢谢。真的很有帮助。