按两个属性对jQuery列表排序

按两个属性对jQuery列表排序,jquery,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获得这个项目列表,并按

我有这个标记:

#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获得这个项目列表,并按
行和
列对它们进行排序

提供的标记结果应为:

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;
});
var gridElements=$('div');
gridElements.sort(函数(a,b){
var contentA=parseInt($(a).attr('data-row');
var contentB=parseInt($(b).attr('data-row');
返回值(contentAcontentB)?1:0;
});
代码笔:


我想我应该按数据行过滤列表,然后在每个组上再次运行
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;
  }
});
var gridElements=$('div');
gridElements.sort(函数(a,b){
var contentA=parseInt($(a).attr('data-row');
var contentB=parseInt($(b).attr('data-row');
//检查行是否相等
如果(contentA==contentB){
var-colA=parseInt($(a).attr('data-col');
var colB=parseInt($(b).attr('data-col');
//执行与您已经执行的相同操作,但使用不同的数据,从上面开始
返回值(可乐<可乐)?-1:(可乐>可乐)?1:0;
}
否则{
返回值(contentAcontentB)?1:0;
}
});

b、e、c、f、d、a是最终的预期结果吗?是的,您甚至可以在代码笔上看到顺序