将json数据拆分为3个列表 - jquery/javascript

Question

我有json数据 我已经把第一组数据写入了一个ul。 我想将剩余的数据分成2个相同的块并写入其他两个uls。

如何在初始索引== 0之后分割剩余的json？

我js代码：

$("#storeList").append('<ul class="storeListLeft"></ul>'); 
    $("#storeList").append('<ul class="storeListRight"></ul>'); 

    //run store json data and append to storeList div 
           var object; 
           $.getJSON('xml/storeList.json', function(json) { 
            object = json; 
            $.each(object.storeList.state, function(index, value) { 
            var list; 
             if(index == 0) { 
              list = $('.storeListLeft'); 
             } else { 
              list = $('.storeListRight'); 
             } 

              listItem = $('<li/>'), 
              html = listItem.append($('<h3/>').text(this.stateName)); 

             $.each(this.store, function() { 
              listItem.append($('<a />').attr('href', this.storeURL).attr('class', 'storeInactive').attr('id', this.storeID).text(this.storeName)); 
             }); 

             list.append(html) 

            }); 
           }); //end json render 

电流输出：

<ul class="storeListLeft"> 
    <li> 
     <h3>state Name</h3> 
     <a>store Name</a> 
    </li> 
</ul> 
<ul class="storeListRight"> 
    <li> 
     <h3>state Name</h3> 
     <a>store Name</a> 
     <a>store Name</a> 
     <a>store Name</a> 
    </li> 
    <li> 
     <h3>state Name</h3> 
     <a>store Name</a> 
    </li> 
</ul> 

我的期望的输出是到所述第一项仍然分配给该storeListLeft，然后分割剩余的数据和分配组块，以2分开uls

所以这样的事情：

<ul class="storeList_1"> //which is index == 0 
    <li> 
     <h3>state Name</h3> 
     <a>store Name</a> 
    </li> 
</ul> 
<ul class="storeList_2"> //2 & 3 are the split of the remainder after index == 0 
    <li> 
     <h3>state Name</h3> 
     <a>store Name</a> 
     <a>store Name</a> 
     <a>store Name</a> 
    </li> 
    <li> 
     <h3>state Name</h3> 
     <a>store Name</a> 
    </li> 
</ul> 
<ul class="storeList_3"> 
    <li> 
     <h3>state Name</h3> 
     <a>store Name</a> 
     <a>store Name</a> 
     <a>store Name</a> 
    </li> 
    <li> 
     <h3>state Name</h3> 
     <a>store Name</a> 
    </li> 
</ul> 

Answer 1

第一循环之前打破美国成你想要的对象：

//get the first state element in the array 
var firstStateArray = object.storeList.state.slice(0, 1); 

//get the half way point of the states 
var mid = Math.round((object.storeList.state.length - 1)/2); 

//assign the first half of the array, starting at the second item (1) to the middle (mid) 
var secondStateArray = object.storeList.state.slice(1, mid); 

//assign the second half of the array but starting after the first half 
var thirdStateArray = object.storeList.state.slice(mid + 1); 

这里是生成的函数标记：

function GenerateMarkup(states, className) { 
    var html = "<ul class='" + className + "'>"; 

    $.each(states, function() { 

     html += "<li>"; 

     html += "<h3>" + this.stateName + "</h3>"; 

     $.each(this.store, function (index, value) { 
      html += "<a href='" + this.storeURL + "' class='storeInactive' id='" + this.storeID + "'>" + this.storeName + "</a>"; 
     }); 

     html += "</li>"; 

    }); 

    html += "</ul>"; 

    $("#storeList").append(html); 
} 

并调用函数：

//create first list...only one state 
GenerateMarkup(firstStateArray, "storeList_1"); 

//create second list 
GenerateMarkup(secondStateArray, "storeList_2"); 

//create third list 
GenerateMarkup(thirdStateArray, "storeList_3"); 

Answer 2

您是否在寻找模数运算符？

if(index % 2 == 0) { 
    list = $('.storeListLeft'); 
} else { 
    list = $('.storeListRight'); 
} 

即使索引将返回0，奇数指标将返回1