按两个属性对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和按顺序排序。

提供的标记结果应为：

 b, e, c, f, d, a 

我可以成功地按行排序，但后来我不知道用col命令它们的最佳方法是什么：

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

CodePen： http ：//codepen.io/FezVrasta/pen/bVEezw

我想我应该按数据行过滤列表，然后再对每个组运行sort ，但是如何？

Answer 1

第二个值仅在第一个值相等时才适用，因此这应该适合您：

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