按排序順序顯示數組數據

我想按字母順序顯示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')); 
    }) 
});

謝謝。

來源

2013-07-17 user2218497

如果以前的瀏覽器不是問題，那麼也有CSS列。 – adeneo

看來，你的數組被正確排序，並且它只是包裝到該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/

它是動態的足夠多，無論你有多少數據，它都會平分爲三列。

來源

2013-07-17 20:38:33 DSurguy

謝謝。 Math Worked :)這裏是小提琴 - > http://jsfiddle.net/vXawz/ – user2218497

我怎樣才能顯示點擊每個名字的描述？ – user2218497

已解決$（'a.dataItem'）。on（'click'，function（e）{description（this）.attr（'data-description'））; }） – user2218497

追加的數據項目列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-17 20:33:39

按排序順序顯示數組數據

回答

相關問題