我正在使用Bootstrap构建页面,并且我正在使用AJAX从XML文件中获取一些数据。所有数据都可以完美检索。但是我试图以网格格式显示它Bootstrap有4列宽,这四列当然是连续的。但是由于某种原因,行div在其中的第一列之后被关闭。 结果如下:
<div class="row">
<div class="col-md-3">contents</div>
</div>
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
<div class="row">
<div class="col-md-3">contents</div>
</div>
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
而不是:
<div class="row">
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
</div>
<div class="row">
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
<div class="col-md-3">contents</div>
</div>
代码:
var i = 1;
var openrow = false;
$(data).find('ITEM').each(function(){
var $item = $(this);
if(i == 1 || i%4-1 == 0){
var html = '<div class="row">';
console.log("Start row at item "+i);
openrow = true
} else {
var html = '';
}
html += '<div class="col-md-3">';
html += '<a href="project.php?id=' + $item.find('ID').text() + '">';
html += '<div class="thumbnail"> <img src="images/'+$item.find('NAME').text().replace(/ /g, "_")+'_Preview.png" alt="'+$item.find('NAME').text()+' Preview" />';
html += '<div class="caption">'
html += '<h3>' + $item.find('NAME').text() + '</h3>';
html += '<p>' + $item.find('TYPE').text() + '</p>';
html += '</div>'; //close caption
html += '</a>';
html += '</div>'; //close thumbnail
html += '</div>'; //close col-md-3
if(i%4 == 0 && i>1){
openrow = false
html += '</div>';
console.log("End row at item "+i);
}
$('#content').append(html);
i++;
});
if(openrow == true){
$('#content').append('</div>');
console.log("End row at item "+i);
}
控制台:
Start row at item 1
End row at item 4
Start row at item 5
End row at item 8
Start row at item 9
End row at item 11
由于目前有10件商品,所以展示完美。任何帮助将不胜感激。
答案 0 :(得分:1)
var i = 1;
var openrow = false;
var runningHTML = '';
$(data).find('ITEM').each(function () {
var $item = $(this);
var html = '';
html += '<div class="col-md-3">';
html += '<a href="project.php?id=' + $item.find('ID').text() + '">';
html += '<div class="thumbnail"> <img src="images/' + $item.find('NAME').text().replace(/ /g, "_") + '_Preview.png" alt="' + $item.find('NAME').text() + ' Preview" />';
html += '<div class="caption">'
html += '<h3>' + $item.find('NAME').text() + '</h3>';
html += '<p>' + $item.find('TYPE').text() + '</p>';
html += '</div>'; //close caption
html += '</div>'; //close thumbnail
html += '</a>';
html += '</div>'; //close col-md-3
runningHTML += html;
if (i == 4) {
$('#content').append($('<div class="row"></div>').append(runningHTML));
runningHTML = '';
i = 1;
} else {
i++;
}
});
应该做的伎俩。
答案 1 :(得分:1)
我建议将代码的一些部分分解为函数以使其更清晰。您使用的条件非常复杂,在某些情况下可以减少。例如:
i == 1 || i%4-1 == 0
// And this row are are equivalent
i%4-1 == 0
似乎关闭html元素的顺序有点颠倒了,应该在缩略图div之后关闭。
以下是我认为适合您的代码
var html ='';
$(data).find('ITEM').each(function(index){
if(i%4 == 0){
if(i > 1){
html += '</div>'; // Insert end if not first loop trough
}
html = '<div class="row">';
}
html += createInnerColumns($(this));
});
html += '</div>';
$('#content').append(html);
function createInnerColumns(item) {
html += '<div class="col-md-3">';
html += '<a href="project.php?id=' + item.find('ID').text() + '">';
html += '<div class="thumbnail">'
html += '<img src="images/'+item.find('NAME').text().replace(/ /g, "_")+'_Preview.png" alt="'+item.find('NAME').text()+' Preview" />';
html += '<div class="caption">'
html += '<h3>' + item.find('NAME').text() + '</h3>';
html += '<p>' + item.find('TYPE').text() + '</p>';
html += '</div>'; //close caption
html += '</div>'; //close thumbnail
html += '</a>';
html += '</div>'; //close col-md-3
return html;
}