使用jQuery的排序元素

我有一個div，#containerDiv，它包含與用戶相關的元素，如名字，姓氏等在單獨的div中。我需要根據姓氏，名字等值對容器div的內容進行排序。使用jQuery的排序元素

在搜索谷歌的例子，我得到的所有追加排序的結果，並沒有改變整個HTML顯示。他們也不按特定字段排序（名字，姓氏）。

因此，請幫助我根據特定字段對#containerDiv的全部內容進行排序並顯示出來。

頁面看起來像一些如前所述下面：

<div id="containerDiv"> 
    <div id="lName_1">dsaf</div><div id="fName_1">grad</div> 
    <div id="lName_2">sdaf</div><div id="fName_2">radg</div> 
    <div id="lName_3">asdf</div><div id="fName_3">drag</div> 
    <div id="lName_4">fasd</div><div id="fName_4">gard</div> 
    <div id="lName_5">dasf</div><div id="fName_5">grda</div> 
    <div id="lName_6">asfd</div><div id="fName_6">drga</div> 
</div>

在按姓氏格值越來越排序，容器div的所得結構應該是這樣的：

<div id="containerDiv"> 
    <div id="lName_3">asdf</div><div id="fName_3">drag</div> 
    <div id="lName_6">asfd</div><div id="fName_6">drga</div> 
    <div id="lName_5">dasf</div><div id="fName_5">grda</div> 
    <div id="lName_1">dsaf</div><div id="fName_1">grad</div> 
    <div id="lName_4">fasd</div><div id="fName_4">gard</div> 
    <div id="lName_2">sdaf</div><div id="fName_2">radg</div> 
</div>

現在我覺得你們都可以以更好的方式幫助我。

來源

2011-11-21 Ankur Mukherjee

可能重複：http://stackoverflow.com/questions/552888/sort-div-elements-using-jquery – pradeek

什麼是你的HTML是什麼樣子？我們可以看到你已經嘗試過（排序明智）。這個問題非常模糊......你的div分成'行'還是隻是浮動..如果這是類似網格的數據，表格會不會更適合.. – rlemon

我假定HTML正在生成某種類型的CMS /數據庫，而不是靜態的？在這種情況下，我建議修改向您提供數據的代碼中的順序。 –

我建議你閱讀div值，以便獲得一組對象（例如人物）或只是名稱並對其執行排序操作。比...將結果輸出到初始div（覆蓋默認值）。

來源

2011-11-21 13:14:17

我已經構建了一個jQuery排序函數，可以在其中影響排序字段。

（它通過將行移動到另一個位置來重建html）。

function sortTableJquery() 
{ 
    var tbl =$("#tbl tr"); 
    var store = []; 
    var sortElementIndex = parseFloat($.data(document.body, "sortElement")); 

    for (var i = 0, len = $(tbl).length; i < len; i++) 
    { 
     var rowDom = $(tbl).eq(i); 
     var rowData = $.trim($("td",$(rowDom)).eq(sortElementIndex).text()); 
      store.push([rowData, rowDom]); 
    } 
    store.sort(function (x, y) 
    { 
     if (x[0].toLowerCase() == y[0].toLowerCase()) return 0; 
     if (x[0].toLowerCase() < y[0].toLowerCase()) return -1 * parseFloat($.data(document.body, "sortDir")); 
     else return 1 * parseFloat($.data(document.body, "sortDir")); 

    }); 
    for (var i = 0, len = store.length; i < len; i++) 
    { 
     $("#tbl").append(store[i][1]); 
    } 
    store = null; 
}

來源

2011-11-21 13:14:36

每當我需要對列表進行排序時，我使用ListJs。

它有很好的文檔記錄，即使對於大型列表也有很好的性能，它非常輕量級（7KB，儘管是不可知的庫）。

來源

2011-11-21 13:14:54 marcio

這是一個簡單例子： HTML：

<div id="containerDiv"> 
    <div>2</div> 
    <div>3</div> 
    <div>1</div> 
</div>

$(function() { 
    var container, divs; 
    divs = $("#containerDiv>div").clone(); 
    container = $("#containerDiv"); 
    divs.sort(function(divX, divY) { 
     return divX.innerHTML > divY.innerHTML; 
    }); 
    container.empty(); 
    divs.appendTo(container); 
    });

你可以通過設置你的divs.sort功能PARAM取決於你的目標。

jsFiddle。

和jQuery Plugin適合

來源

2011-11-21 13:28:25 island205

使用jQuery的排序元素

回答

相關問題