0

我正在尝试按字母顺序在 3 列中显示多维数组，我能够对数组进行排序。

目前我的列表显示为：

阿曼达·布拉德·莉莎
马德利·莫瓦基

但是，我想要以下格式的结果

阿曼达·莉莎·莫瓦基
布拉德·马德利

这是我的小提琴

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

谢谢。

4

2 回答 2

0

先将数据项附加到列 div，然后将列添加到主列，然后将 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
于 2013-07-17T20:33:39.047 回答
0

看来您的数组正在正确排序，它只是换行到该 div 的第二行。这里的问题不是排序，而是 html 布局。

拥有排序数组后，您需要做的事情如下：

首先创建三个 html 列。使用 cssfloat: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/

它足够动态，无论您拥有多少数据，它都会将其平均分成三列。

于 2013-07-17T20:38:33.230 回答