Javascript 为按Id而不是dom位置排序的每个（）元素运行一个函数

我有一个单词列表，可以在dom中重新排列，我需要按照特定的顺序抓取每个单词。我已经（某种程度上）计算了需要它们的顺序，并使用jQuery将该数字用作它们的Id

我的问题是如何从编号最低的Id开始，到编号最高的Id结束

html的外观如下所示：

<span class="chosenword" id="577.9848041534424" style="position: absolute; top: 320px; left: 442.9999694824219px; z-index: 1;">Word!</span>

 $('.chosenword').each(function(){
   var position = $(this).position();
   var id = ((position.left) * (position.top));
   $(this).attr('id', id);
  var chosenword =  $(this).html();


   $('#chosenwords').append(chosenword);
   $('#chosenwords').append(" ");
    });

请注意，我并没有实际抓取具有Id的环绕音域，所以在抓取它们之后，我不能真正重新排列它们，至少我不希望这样

有什么想法吗？

先把它们写下来，然后循环使用

。每个（）

，就像你已经在做的那样：

$($('.chosenword').toArray().sort(function(a,b){return +a.id - b.id;})).each(function(){
   // your existing code here
});

或者，如果缓存jQuery对象，则可以就地对其进行排序，这样就不必在排序后创建另一个jQuery对象：

var $chosen = $('.chosenword');
[].sort.call($chosen, function(a,b){return +a.id - b.id;});
$chosen.each(function() {
    // your existing code here
});

首先使用它们，然后使用

.each（）

循环，就像您已经在做的那样：

$($('.chosenword').toArray().sort(function(a,b){return +a.id - b.id;})).each(function(){
   // your existing code here
});

或者，如果缓存jQuery对象，则可以就地对其进行排序，这样就不必在排序后创建另一个jQuery对象：

var $chosen = $('.chosenword');
[].sort.call($chosen, function(a,b){return +a.id - b.id;});
$chosen.each(function() {
    // your existing code here
});

2件事：

尽量不要在id处使用数字。通常，如果标识符以字母或下划线开头，则最好使用数字

<div><span class="chosenword" order="1">Word 1</span> - 
<span class="chosenword" order="550">Word 550</span> - 
<span class="chosenword" order="57">Word 57</span>
</div> - 
<div id="chosenwords"></div>​

word1-
字550-
单词57
- 
​

尝试对数组进行排序，然后在设置顺序后对每个数组进行检查

$('.chosenword').each(function(){
    var position = $(this).position();
    var order = ((position.left) * (position.top));
    $(this).attr('order', order);
});

$('.chosenword').sort(sortByOrderAttr).each(function() {
   var chosenword = $(this).html() + " - ";
    $('#chosenwords').append(chosenword);
});

function sortByOrderAttr(a, b) {
    var idA = parseInt($(a).attr('order'));
    var idB = parseInt($(b).attr('order'));
    if (idA < idB) {
        return -1;
    } else {
        return 1
    }
}​

$（'.chosenword'）。每个（函数（）{
var position=$（this.position（）；
变量顺序=（（position.left）*（position.top））；
$（this.attr（'order'，order）；
});
$（'.chosenword'）.sort（sortByOrderAttr）.each（function（）{
var chosenword=$（this.html（）+“-”；
$（'#chosenwords'）。追加（chosenword）；
});
功能sortByOrderAttr（a，b）{
var idA=parseInt（$（a）.attr（'order'）；
var idB=parseInt（$（b）.attr（'order'）；
如果（idA

2件事：

尽量不要在id处使用数字。通常，如果标识符以字母或下划线开头，则最好使用数字

<div><span class="chosenword" order="1">Word 1</span> - 
<span class="chosenword" order="550">Word 550</span> - 
<span class="chosenword" order="57">Word 57</span>
</div> - 
<div id="chosenwords"></div>​

word1-
字550-
单词57
- 
​

尝试对数组进行排序，然后在设置顺序后对每个数组进行检查

$('.chosenword').each(function(){
    var position = $(this).position();
    var order = ((position.left) * (position.top));
    $(this).attr('order', order);
});

$('.chosenword').sort(sortByOrderAttr).each(function() {
   var chosenword = $(this).html() + " - ";
    $('#chosenwords').append(chosenword);
});

function sortByOrderAttr(a, b) {
    var idA = parseInt($(a).attr('order'));
    var idB = parseInt($(b).attr('order'));
    if (idA < idB) {
        return -1;
    } else {
        return 1
    }
}​

$（'.chosenword'）。每个（函数（）{
var position=$（this.position（）；
变量顺序=（（position.left）*（position.top））；
$（this.attr（'order'，order）；
});
$（'.chosenword'）.sort（sortByOrderAttr）.each（function（）{
var chosenword=$（this.html（）+“-”；
$（'#chosenwords'）。追加（chosenword）；
});
功能sortByOrderAttr（a，b）{
var idA=parseInt（$（a）.attr（'order'）；
var idB=parseInt（$（b）.attr（'order'）；
如果（idA

Ahh。。。您能不能先将它们输出到已排序的DOM？我认为你所做的将是非常低效的。啊。。。您能不能先将它们输出到已排序的DOM？我认为您尝试做的工作效率很低。jQuery将

数组.prototype.sort

放入

$.fn

-您可以调用

$（'.chosenword'）。sort

@Dennis-我没有意识到这一点。谢谢现在您已经指出了，我看了一下，在文档中看不到它，在jquery.js中，它的注释是“仅供内部使用”-是的，它可以工作，但是jQuery团队似乎并不鼓励这样做，尽管我认为这是一个很好的特性，他们希望推广…不得不对我的原始代码进行一些修改，但这得到了它，谢谢！是的，仔细看，

$.fn.sort

会返回一个数组，因此它没有完全集成到API中，但是内部使用的注释才有意义。@Dennis-我经常想知道为什么jQuery团队没有包含一个完全集成的

.sort（）

，但是有些人认为jquery.js已经太大了，在我需要排序的少数情况下，只需使用

Array.prototype.sort（）

，就足够容易了，所以…jquery将

Array.prototype.sort

放在

$.fn

中，你可以调用

$（'.chosenword'）。排序

@Dennis-我没有意识到这一点。谢谢现在您已经指出了，我看了一下，在文档中看不到它，在jquery.js中，它的注释是“仅供内部使用”-是的，它可以工作，但是jQuery团队似乎并不鼓励这样做，尽管我认为这是一个很好的特性，他们希望推广…不得不对我的原始代码进行一些修改，但这得到了它，谢谢！是的，仔细看，

$.fn.sort

会返回一个数组，因此它没有完全集成到API中，但是内部使用的注释才有意义。@Dennis-我经常想知道为什么jQuery团队没有包含一个完全集成的

.sort（）

，但是有些人认为jquery.js已经太大了，在我需要排序的少数情况下，只需使用

Array.prototype.sort（）

，就足够简单了，所以…“通常最好是标识符以字母或下划线开头”-为什么？html5规范允许数字，并且所有现代浏览器都支持数字（不是吗？）。想象一下这样一个场景，您可能希望将dom抽象为js对象，以保存在DB中或其他可移植用途。这会容易得多，因为数字不允许是js变量。在语义上，将您正在排序的数据作为元素的“id”也是不正确的，您应该标记您的数据，以便在上下文之外有一定的意义。我无法想象需要一个作为元素id的变量名。可能是一个变量值，但不是一个变量名。如果我将DOM抽象为一个JS对象，那么id很可能最终成为一个属性值，或者可能最终成为一个属性名，这两者都可以用数字表示。。。（我确实同意

数据排序顺序=“…”

对于OP的工作会更好，但这是另一个问题。）“通常最好是标识符以字母或下划线开头”-为什么？html5规范允许数字，而所有现代浏览器都支持数字（不是吗？）。想象一下，如果你想