作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在收到 ajax 的响应后,我想使用 javascript 循环来包装两行产品布局。
目的:我想得到如下结果
<div class="owl-item">
<div class="row item">
<div class="product">
<div class="image">
<a href=""><img src="asset/img/main/9.jpg" alt="img"></a>
<div class="promotion"><span class="discount">4</span></div>
<div class="description">
<div class="price"><span>1.0000</span></div>
<h4><a href="#"></a></h4><p>short detial</p>
</div>
</div>
</div>
</div>
<div class="row item">
<div class="product">
<div class="image">
<a href=""><img src="9.jpg"alt="img"></a>
<div class="promotion"><span class="discount">4</span></div>
<div class="description">
<div class="price"><span>2.0000</span></div>
<h4><a href="#"></a></h4>
<p>short detial</p></div>
</div>
</div>
</div>
</div>
按照上面的 html 计划,我想循环 <div class="owl-item">
一次然后我将循环 <div class="row item">
两次所以我的 html 布局将包装我的产品,如下图所示。
$.ajax({
type: "GET",
url: "<?php echo base_url('main/dataaccess'); ?>",
dataType: "json",
cache: false,
success: function (data, st) {
if (st == 'success') {
$.each(data, function (i, obj) {
var out = '<div class="row item">';
out += '<div class="product">';
out += '<div class="image">';
out += '<a href=""><img src="asset/img/main/9.jpg" alt="img" class="img-responsive"></a>';
out += '<div class="promotion"><span class="discount">' + obj.prodId + '</span> </div>';
out += '<div class="description"><div class="price"><span>' + obj.prodPrice + '</span></div><h4><a href="#">' + obj.prodName + '</a></h4>';
out += '<p>short detial</p>';
out += '</div>';
out += '</div>';
$(out).appendTo("#ps");
});
$("#ps").owlCarousel({
navigation: false,
pagination: false,
items: 8,
itemsTablet: [408, 2]
});
}
}
});
最佳答案
应用于您的 div 的那些类之一是否设置为 display:inline-block ?我建议检查呈现的页面以确认 div 显示: block 。
关于javascript - 如何在javascript中进行两次循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35754732/
我是一名优秀的程序员,十分优秀!