cha0s,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#content{float:left}
#content div:after{content:"→"}
#results span:before{content:"→"}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document)
.ready(function () {
var d = $.makeArray($("#content div"))
.sort(function (b, c) {
b = $(b).attr("position").split(",");
c = $(c).attr("position").split(",");
for (var a = 0; a < b.length; a++) {
if (a == c.length || +b[a] > +c[a]) return 1;
if (+b[a] < +c[a]) return -1
}
return a < c.length ? -1 : 0
});
$("#results")
.append(d.map(function (b, c) {
return $(b).clone().append($('<span/>', {text : $(b).attr("position")}))
}))
});
</script>
</head>
<body>
<div id="content">
<div position="16">8</div>
<div position="1,1">2</div>
<div position="1">1</div>
<div position="1,5">6</div>
<div position="1,2">3</div>
<div position="1,2,1,1">4</div>
<div position="1,4">5</div>
<div position="2">7</div>
</div>
<div id="results">
</div>
</body>
</html>