0

dom で再配置できる単語のリストがあり、特定の順序でそれぞれを取得する必要があります。私は（一種の）それらが必要な順序を計算し、jQueryを使用してその番号をIDとして使用しました。

私の質問は、最も小さい番号の Id から始まり、最も大きい ID で終わる各 ID をどのように処理するかです。

html は次のようになります。

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

JS は次のようになります。

 $('.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 を持つサラウンド Span を実際に取得していないことに注意してください。したがって、それらを取得した後にそれらを実際に再配置することはできません。少なくとも、そうしないことを望みます。

何か案は？

4

2 に答える 2

2

.sort().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
});
于 2012-12-17T02:44:46.963 に答える
1

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>​

配列を並べ替えてから、順序を設定した後にそれぞれを調べてみてください

$('.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
    }
}​
于 2012-12-17T03:04:39.593 に答える