按两个属性对 jQuery 列表进行排序

我有这个标记：

#a(data-row="2", data-col="3") a
#b(data-row="1", data-col="1") b
#c(data-row="1", data-col="3") c
#d(data-row="2", data-col="2") d
#e(data-row="1", data-col="2") e
#f(data-row="2", data-col="1") f

正如您所看到的，它定义了一个元素网格（3 列和 2 行）。

我需要使用 jQuery 获取此项目列表并按以下方式排序row and by col.

提供的标记的结果应该是：

b, e, c, f, d, a

我可以成功地按行排序，但我不知道按列排序的最佳方法是什么：

var gridElements = $('div');
gridElements.sort(function (a, b) {
  var contentA =parseInt( $(a).attr('data-row'));
  var contentB =parseInt( $(b).attr('data-row'));
  return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
});

代码笔：http://codepen.io/FezVrasta/pen/bVEezw

我想我应该按数据行过滤列表，然后运行sort每组再重复一遍，但是如何呢？

仅当第一个值相等时第二个值才适用，因此这应该为您完成：

var gridElements = $('div');
gridElements.sort(function (a, b) {
  var contentA =parseInt( $(a).attr('data-row'));
  var contentB =parseInt( $(b).attr('data-row'));


  //check if the rows are equal
  if (contentA === contentB) {
     var colA = parseInt( $(a).attr('data-col'));
     var colB = parseInt( $(b).attr('data-col'));

     //do the same as your already doing but using different data, from above
     return (colA < colB) ? -1 : (colA > colB) ? 1 : 0;
  }
  else {
    return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
  }
});