отображение данных массива в отсортированном порядке

Question

Я пытаюсь отобразить многомерный массив в 3 столбцах в алфавитном порядке, я могу сортировать массив.

В настоящее время мой список отображается как:

 
Amanda Brad Lisha 
Madley Mowaki 

Но я хочу результат, как показано ниже формате

 
Amanda  Lisha Mowaki 
Brad  Madley 

Вот мой Fiddle

HTML:

<div> 
<div class='main'></div> 
<div id='description'></div> 
</div> 

JS:

$(function() { 
    function compare(a, b) { 
     if (a.name < b.name) return -1; 
     if (a.name > b.name) return 1; 
     return 0; 
    } 
    data.sort(compare); 

    for (var i = 0; i < data.length; i++) { 
     var dataItem = "<a href='#' class='dataItem' data-description='" + data[i].desc + "'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a>"; 
     $('.main').append(dataItem); 
     //alert(data[i]['name']);  
     if (i % 3 == 2) { 
      $('.main').append("</br>"); 
     } 
    } 

    var description = $('#description'); 
    $('a.dataItem').on('click', function (e) { 
     description.text($(this).data('description')); 
    }) 
}); 

Спасибо.

Answer 1

Кажется, что ваш массив сортируется правильно, и он просто переносится во вторую строку этого div. Проблема здесь не в сортировке, это макет html.

Что вы должны сделать что-то вроде следующего после у вас есть отсортированный массив:

Создать три HTML столбцов, во-первых. Используйте css float:left; width: 33%;, чтобы получить их рядом друг с другом. Затем вам нужно рассчитать, сколько частей данных собирается сделать это в три столбца, а затем бросить их в столбцы в кусках. Есть какая-то математика, но она не слишком сумасшедшая.

HTML:

<div id="col-A"></div> 
<div id="col-B"></div> 
<div id="col-C"></div> 

Javascript

var cols = 3; 
var data = [/*This is your array*/]; 
//find out how many things we should have for three equal columns 
var numPerCol = Math.ceil(data.length/cols); 
//this lets us reference column names by number (0,1,2) 
var colNames = ["col-A","col-B","col-C"]; 
var whichCol, colElem, newElem; 
//loop through the data! 
for(var i=0; i<cols; i++){ 
    //determine which column this piece of data is going in 0 = col-A, 1 = col-B etc 
    whichCol = Math.floor(i/numPerCol); 
    //retrieve the column element 
    colElem = document.getElementById(colNames[whichCol]); 
    //create a new div element for our piece of data 
    newElem = document.createElement("div"); 
    newElem.innerText = data[i]; 
    newElem.style.display = "block"; 
    //slap it into the column! 
    colElem.appendChild(newElem); 
} 

Вот скрипка этой работы, и я уверен, что вы можете получить его модифицировать, чтобы соответствовать вашим данным: http://jsfiddle.net/hbQ2T/

Это динамичное достаточно, чтобы неважно, сколько у вас данных, оно равномерно разделит его на три столбца.

Answer 2

Добавление элементов данных в виде DIV столбца первой затем добавить столбец к основной, а затем всплывают дивы покинул

CSS

.column { 
    float:left; //Put each column next to each other. 
} 
.column .dataItem { 
    display:block; //so each one displays on its own line. 
} 

Javascript

var column = jQuery('<div class="column"></div>'); 
var maxColumnRows = 2; 
var rIndex = 0; 
for(var i=0;i<data.length;i++) 
{   
    if(rIndex > maxColumnRows-1) { //-1 because 0 index 
     $('.main').append(column); 
     column = jQuery('<div class="column"></div>'); 
      rIndex=0; 
    } 

    var dataItem = "<a href='#' class='dataItem' data-description='" + data[i].desc + "'>" + data[i].name + " <strong>(" + data[i].age + ")</strong>" + "</a>"; 

    column.append(dataItem); 
    rIndex++; 
} 
$('main').append(column); //append last column