如何将数组拆分为多维数组？

So I have a JSON feed that returns a list of job titles. I would like the split the parsed data so that they are split into nodes of 3. So for example, right now I am appending all the ones into HTML that looks like:

所以我有一个JSON提要,返回一个职位列表。我希望拆分解析后的数据,以便将它们拆分为3个节点。例如,现在我将所有的数据附加到HTML中,如下所示:

<div class="slide">
  <div class="jobs-list">
    <a href="#" class="job">Title 1</a>
    <a href="#" class="job">Title 2</a>
    <a href="#" class="job">Title 3</a>
    <a href="#" class="job">Title 4</a>
    <a href="#" class="job">Title 5</a>
   </div>
</div>

I would like the output to look like:

我希望输出看起来像:

<div class="slide slide1">
  <div class="jobs-list">
    <a href="#" class="job">Title 1</a>
    <a href="#" class="job">Title 2</a>
    <a href="#" class="job">Title 3</a>
   </div>
</div>
<div class="slide slide2">
  <div class="jobs-list">
    <a href="#" class="job">Title 4</a>
    <a href="#" class="job">Title 5</a>
   </div>
</div>

Here is my current JS

这是我目前的JS

$.get('sample-json/9.json', function (data) {
  var data = $.parseJSON(data);
  console.log(data);

  if (data.result.length === 0) {
    alert("No Data. Show Error Screen.");
  } else {
    count = 0;
    count++;
    $("#careers .slides").append('<div class="slide slide' + count + '"></div>');
    $('.slide' + count).append('<div class="jobs-list"></div>');

    $(data.result).each(function (i, d) {
      $('.slide' + count).find(".jobs-list").append(
        '<a class="job cf" href="#">'+ d.type + '</a>');
    });

  }
});

Any pointers on how I should go about doing this?

有关如何进行此操作的任何指示?

3 个解决方案

#1

Do you know the modulo operator? http://en.wikipedia.org/wiki/Modulo_operation

你知道模数运算符吗? http://en.wikipedia.org/wiki/Modulo_operation

var currentBlock;
jobs.each(function(i, d){
  if(i % 3 == 0){
    //make a new block
    currentBlock = ...
    $("#careers .slides").append(currentBlock)
  }
  // add stuff to the current block
  currentBlock.append(...)
})

#2

If you process your JSON into this HTML structure (similar to what you already did):

如果您将JSON处理为此HTML结构(类似于您已经执行的操作):

<div class="slides">
    <a href="#" class="job">Title 1</a>
    <a href="#" class="job">Title 2</a>
    <a href="#" class="job">Title 3</a>
    <a href="#" class="job">Title 4</a>
    <a href="#" class="job">Title 5</a>
</div>

Then you can manipulate it afterwards into the structure you want, using this JS:

然后你可以使用这个JS操作它,然后进入你想要的结构:

var count = 1;
while ($("div.slides > a.job").length) {
    $("div.slides").append("<div class='slide slide" + count + "'></div>");
    for (var i = 0; i < 3; i++) {
        $("div.slides > a.job:first").appendTo($("div.slide" + count));
    }
    count++;
}
$("div.slide").wrapInner("<div class='jobs-list'></div>");

fiddle: http://jsfiddle.net/Vcjs4/

#3

I was able to solve the problem using a modulus operator.

我能够使用模数运算符解决问题。

$.get('sample-json/9.json', function(data) {
  var data = $.parseJSON(data);

  if( data.result.length === 0 ) {
    alert("No Data. Show Error Screen.");
  } else {
    count = 0;
    $( data.result).each(function(i,d){
      if(i % 6 == 0){
        count++;
        $("#careers .slides").append('<div class="slide slide' + count + '"></div>');
        $('.slide' + count).append('<div class="jobs-list"></div>');
      }
      $(".slide" + count).find(".jobs-list").append( 
        '<a class="job cf" href="#" target="_blank">' + d.title + '</a>'
      );  
    });
  }
});

#1