$.slice() not working after loop of $.appendTo()

Question

I am pulling some information out of some JSON, which works just fine. It ends up generating a series of divs using the following:

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;
  });
});

I need to insert a new fluid row for every 3 divs in #projectList. I figured .slice() would be my best option (feel free to correct me if I'm mistaken). So I make the call to generate my series of divs, and then I attempt to slice (taken and modified from 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>');
}

When I look at my results, I don't see the inserted rows. Firebug doesn't see anything syntatically wrong, and the return on an alert for divs.length is 0.

Your `for` loop has an error: `i=+3` should be `i+=3` - whitespaces ftw^^ — Andreas, May 13 '13 at 18:54
@Andreas Thanks for correcting my for loop. Ran my app again, and still the same results. — Adam Bartz, May 13 '13 at 18:57
With the fixed errors, your code should work, assuming you are waiting until after the $.getJSON is complete to do your wrapping. (remember, ajax is asynchronous!) — Kevin B, May 13 '13 at 18:57
Why not add the row while you're generating your `div`s (i.e., inside of the `$.each(json.projects` callback) instead of waiting until afterwards? Also, in your original code, the `index` parameter of the `$.each` callback will have the same value as your `i` variable, so you could remove that if you don't need it elsewhere. — Heretic Monkey, May 13 '13 at 19:03
same as `$('
').html('
' + title + '
' + description).appendTo('#projectList');` really — Mark Schultheiss, May 13 '13 at 19:06
@MikeMcCaughan That makes too much sense. :P But it would speed things up a bit. — Adam Bartz, May 13 '13 at 19:10
`var myElements = ''; $.each(json.projects, function (index, data) { var myElements = ''; myElements += '
' + title + '
' + description '+
'; }); $(myElements).appendTo('#projectList');` only hit DOM once — Mark Schultheiss, May 13 '13 at 19:14

score 0 · Answer 1 · answered May 13 '13 at 19:34

Based on one of the suggestions in the comments, I reworked the $.getJSON to insert the rows and avoid using slice(). The following seems to work well.

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);
  });
});

score 0 · Answer 2 · answered May 13 '13 at 19:48

your original code i beleieve is working too

DEMO with original code modification SO may be in your original code you was calling

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

Before AJAX completes.

with your current code as shown below you are calling it after ajax complete... so it works...

$.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);
  });
});

Just try below code and tell me if its not working

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() not working after loop of $.appendTo()

' + title + '

' + title + '

2 Answers2