使用 Ajax 循环附加 Div 类
Append Div Class with Ajax Loop
我有一个Ajax脚本,它读取一个XML文件,并在div内附加一个ID为"links"的每个节点。脚本工作正常,但我想在类"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>
尝试换行
$('#links a').wrap('<div class="col-md-3">');
https://jsfiddle.net/xwLmm1d0/1/
我会在插入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>
也在这个小提琴上。
相关文章:
- Django-提交表单Ajax(替换Div)
- 在 AJAX 调用中发送 DIV 元素的 ID
- 使用 Ajax 循环附加 Div 类
- 将 AJAX 加载的内容加载到 DIV 中.哪个页面拥有/控制什么
- Rails 3.2 Coffeescript to Refresh Div using Ajax - 重新加载整个页面
- DIV 的 HTML 长度不等于 AJAX 加载的 HTML 长度
- 如何输出反向顺序?AJAX 文件 > DIV.
- 在 ajax 函数中向 DIV 添加样式更改
- 将 AJAX 响应文本加载到 DIV 中
- 将通过 AJAX 上传到 DIV 的变量传递到同一 DIV 中,并将内容替换为结果
- 在提交 AJAX 表单后刷新 Div 的内容
- 仅使用 jscript 或 ajax 重置 1 个 DIV
- 当内容通过 AJAX 时,如何从 html() 中提取给定 DIV 的 HTML()
- PHP / Ajax : 如何在 $_SESSION 变量值上显示/隐藏 DIV
- 使用 jQuery.AJAX 在 Div 中显示 JS 图表
- AJAX - 将可链接的内容保留在 DIV 中
- 定位 AJAX 会通过使用“rel”属性生成正确的 DIV
- AJAX/jQuery:根据其中的数字值更改 DIV 背景
- 如何使用 AJAX 打开 DIV 标记内的 URL
- 用AJAX更新的Div结果丢失更新