Question

我想根据input的名称对find的结果进行排序，如下所示：

HTML：

<form id="sort" ...>
<input name=...>
<input name=...>
...
</form>

jQuery的：

var result = $('#sort').find('input');
var serialized = result.sort(comparer(result)).serialize();

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index);
    var valB = getCellValue(b, index);
    return valA.localeCompare(valB);
  };
};

function getCellValue(element, index) {
  return element.attr('name');
};

它不起作用;错误消息：Uncaught TypeError: undefined is not a function：return valA.localeCompare(valB);

以上内容来自this，但我不太了解比较器功能。

Answer 1

在这里查看jsfiddle。我使用函数表达式来定义比较器。

基本上，如果您的表单看起来像这样：

<div id="sort">
<form>
    <input type="text" name="two" />
    <input type="text" name="one" />
</form>
</div>

然后，以下javascript应按名称对输入元素进行排序，然后将它们序列化：

var sorted = $('#sort').find('input');
var serialized = sorted.sort(function(a, b) { 
    var valA = getCellValue(a);
    var valB = getCellValue(b);
    return valA.localeCompare(valB);
}).serialize();
alert(serialized);

function getCellValue(element) {
  return element.name;
};

或者，如果您更喜欢使用命名函数，则以下内容应该有效：

var sorted = $('#sort').find('input');
var serialized = sorted.sort(myComparer).serialize();
alert(serialized);

function myComparer(a, b) {
    var valA = getCellValue(a);
    var valB = getCellValue(b);
    return valA.localeCompare(valB);
}

function getCellValue(element) {
  return element.name;
};

Answer 2

问题是a和b是纯DOM元素，而不是jQuery实例，因此它们没有attr方法。这是不依赖于jQuery的固定代码，因为您可以使用括号表示法获取DOM元素属性：

var result = $('#sort').find('input');
var serialized = result.sort(comparer('name')).serialize();

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index);
    var valB = getCellValue(b, index);
    return valA.localeCompare(valB);
  };
};

function getCellValue(element, index) {
  return element[index];
};

查看下面的演示。

var result = $('#sort').find('input');
var serialized = result.sort(comparer('name')).serialize();

alert(serialized);

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index);
    var valB = getCellValue(b, index);
    return valA.localeCompare(valB);
  };
};

function getCellValue(element, index) {
  return element[index];
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sort">
    <input name="username" value="Thomas">
    <input name="age" value="12">
</form>

jQuery：对find的结果进行排序

2 个答案: