在多个div'；谁在使用javascript/jquery？

文本框中显示三个字段（名字、姓氏和年龄）。每个字段以单独的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>

2012-05-09 20:39:38.0
20英里
2012-05-10 20:39:38.0
30英里
2012-05-11 20:39:38.0
50英里
2012-05-12 20:39:38.0
60英里

如何在javascript中实现这一点

你可以用它来做类似的事情

例如，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代码您想要根据输入字段的值对结果进行排序的信息吗？另外，为什么不先在服务器端对数据进行排序，而不是尝试使用Javascript进行排序？请检查上面的代码，您的数据不一致，是fanme、lname、distance。还是价格、日期、距离？@davidethell是的。我必须对输入框中div内的值进行排序。将有大量数据，因此将值发布到服务器并再次返回排序后的值将是一个巨大的过程。而且，每当添加新记录时，编辑器本身都会对记录进行排序。@MishuCn这是我在上面提到的链接中使用的代码$（'#content div.price'）.map（函数（）{//map sort value和相关的dom元素以便于处理返回{val:parseFloat（$（this.text（），10），el:this.parentNode}；}）.sort（函数（a，b）{//a简单的asc排序返回a.val-b.val；}）.map（函数（）{//将列表缩减为实际的dom元素返回this.el；}）.appendTo（“#content”）；Tablesorter并不能真正解决问题，因为OP使用的是div而不是表。

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