AJAX关闭div因为感觉就像它

时间:2014-07-30 07:49:05

标签: jquery ajax twitter-bootstrap

我正在使用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件商品,所以展示完美。任何帮助将不胜感激。

2 个答案:

答案 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;
}