使用javascript/jquery對多個div中的輸入文本進行排序？

Question

在文本框中顯示了三個字段（名字，姓氏&年齡）。每個字段顯示在單獨的div中。有4條記錄。在單擊每個字段上方的排序按鈕時，div記錄應根據字段的數據類型進行排序，並應顯示在HTML頁面中。

I tried the solution in this link

，因爲記錄的專區內顯示在文本框中我不能使用此。

<div id="content"> 
    <div> 
     <div class="price"><input type="text" class="pri" value="120"/></div> 
     <div class="dateDiv">2012-05-09 20:39:38.0</div> 
     <div class="distance">20 mile</div> 
    </div> 

    <div> 
     <div class="price"><input type="text" class="pri" value="123"/></div> 
     <div class="dateDiv">2012-05-10 20:39:38.0</div> 
     <div class="distance">30 mile</div> 
    </div> 

    <div> 
     <div class="price"><input type="text" class="pri" value="100" /></div> 
     <div class="dateDiv">2012-05-11 20:39:38.0</div> 
     <div class="distance">50 mile</div> 
    </div> 

    <div> 
     <div class="price"><input type="text" class="pri" value="124"/></div> 
     <div class="dateDiv">2012-05-12 20:39:38.0</div> 
     <div class="distance">60 mile</div> 
    </div> 
    </div> 

我該如何在JavaScript中做到這一點？

Answer 1

看到使用jquery.tinysort.min.js

看到also this one

Answer 2

您可以使用knockoutjs做這樣的事情。

例如，HTML：

<div id="content" data-bind="foreach: lines"> 
    <div class="fname"><input type="text class="pri" data-bind="value: fname"/></div> 
    <div class="lname" data-bind="text: lname"/> 
    <div class="age" data-bind="text: age"/> 
</div> 

的Javascript：

function EachDivViewModel(line) 
{ 
    this.fname = line.fname; 
    this.lname = line.lname; 
    this.age = line.age; 
} 

function YourViewModel() 
{ 
    var self = this; 
    self.lines = ko.observableArray([]); // this array will contain elements of EachDivViewModel type 

    self.handlerForYourSortButtongs = function() { 
     // Code here to sort the array based on the button clicked 
     // The UI will automatically get updated as you reorder the elements in the lines array 
    } 
} 


$(document).ready(function() { 
    var yourViewModelInstance = new YourViewModel(); 
    // Code to get the lines here 
    ko.applyBindings(yourViewModelInstance); 
}); 

Answer 3

它可以通過tablesorter完成。

希望能幫助你。