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

Question

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

我在此鏈接中嘗試了解決方案

我不能使用它，因為記錄顯示在div的文本框中。

 <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

您可以使用kickoutjs進行類似的操作。

例如，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 2

使用jquery.tinysort.min.js觀看此演示

看也是這一個

Answer 3

可以使用tablesorter完成。

希望對您有所幫助。