jQuery: sort the results of find

Question

I'd like to sort the result of find according to the name of the input as follows:

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

It doesn't work; error message: Uncaught TypeError: undefined is not a function on the line: return valA.localeCompare(valB);

The above was from this, but I don't quite understand the comparer function.

rsbarro · Answer 1 · 2015-02-13T06:39:55.927

Check out the jsfiddle here. I used a function expression to define the comparer.

Basically if your form looks something like this:

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

Then the following javascript should sort the input elements by name and then serialize them:

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

Or, if you prefer to use a named function, the following should work:

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

score 1 · Accepted Answer · answered Feb 13 '15 at 06:34

The problem is that a and b are plain DOM elements, not jQuery instancies so they don't have attr method. Here is the fixed code that doesn't rely on jQuery, as you can get DOM element property using bracket notation:

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

Check the demo below.

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: sort the results of find

2 Answers2