Question

我从一些JSON中提取一些信息，这很好用。它最终使用以下内容生成一系列div：

var i = 0;
$.getJSON(url, function(json) {
  $.each(json.projects, function(index, data) {
    //some stuff to find and filter my data
    $('<div/>', {
      id: i,
      "class" : "span4",
      html: '<h3>' + title + '</h3>' + description
    }).appendTo('#projectList');
  i = i + 1;
  });
});

我需要在#projectList中为每3个div插入一个新的流体行。我认为.slice（）将是我最好的选择（如果我弄错了，请随时纠正我）。所以我调用生成我的div系列，然后尝试切片（从Wrap every 3 divs in a div中获取和修改）。

var divs = $('#projectList > div');
for (var i = 0; i < divs.length; i+=3) {
  divs.slice(i, i+3).wrapAll('<div class="row-fluid"></div>');
}

当我查看结果时，我看不到插入的行。 Firebug没有看到任何语法错误，并且divs.length警报的返回值为0.

Answer 1

根据评论中的一条建议，我重新设计了$ .getJSON来插入行并避免使用slice（）。以下似乎效果很好。

var currentIndex;
$.getJSON(url, function(json) {
  $.each(json.projects, function(index, data) {
    if (index % 3 == 0) {
      currentIndex = index;
      $('#projectList').append('<div id="' + index + '" class="row-fluid">');
    }
    $('<div/>', {
      id: index,
      "class" : "span4",
      html: '<h3>' + title + '</h3>' + description
    }).appendTo('#' + currentIndex);
  });
});

Answer 2

你原来的代码我也很努力

<强> DEMO with original code modification 可能是您正在调用的原始代码

var divs = $('#projectList > div');
for (var i = 0; i < divs.length; i+=3) {
  divs.slice(i, i+3).wrapAll('<div class="row-fluid"></div>');
}

在AJAX完成之前。

使用您当前的代码，如下所示，您在ajax完成后调用它...所以它可以工作......

$.getJSON(url, function(json) {
  $.each(json.projects, function(index, data) {
    if (index % 3 == 0) {
      currentIndex = index;
      $('#projectList').append('<div id="' + index + '" class="row-fluid">');
    }
    $('<div/>', {
      id: index,
      "class" : "span4",
      html: '<h3>' + title + '</h3>' + description
    }).appendTo('#' + currentIndex);
  });
});

只需尝试以下代码并告诉我它是否无效

var i = 0;
$.getJSON(url, function(json) {
  $.each(json.projects, function(index, data) {
    //some stuff to find and filter my data
    $('<div/>', {
      id: i,
      "class" : "span4",
      html: '<h3>' + title + '</h3>' + description
    }).appendTo('#projectList');
  i = i + 1;
  });

  var divs = $('#projectList > div');
   for (var i = 0; i < divs.length; i+=3) {
     divs.slice(i, i+3).wrapAll('<div class="row-fluid"></div>');
    }

});

$ .slice（）在循环$ .appendTo（）后无效

2 个答案: