3

少し前に、私はこの質問をしました： javascriptのソート配列は、誤った前提であることが判明したことに基づいて、順序配列と整列します。（私はあまりにも長い間起きていました、私に休憩をください）。

私が本当にする必要があるのは、DOM要素をソートすることです。私のアプリケーションでは、CPUが非常に少ない状況で実行されるため、パフォーマンスが重要です。だから私が持っているのはこのようなものです：

<div id="moduleWrap">
    <div class="module">Jack</div>    <!-- 0 -->
    <div class="module">Jill</div>    <!-- 1 -->
    <div class="module">Nancy</div>   <!-- 2 -->
    <div class="module">Tom</div>     <!-- 3 -->
    <div class="module">Cartman</div> <!-- 4 -->
</div>

そしてJavaScriptで：

$modules = $('#moduleWrap .module');
order    = [3,1,4,0,2];

私が必要なのはこれです：

<div id="moduleWrap">
    <div class="module">Tom</div>     <!-- 3 -->
    <div class="module">Jill</div>    <!-- 1 -->
    <div class="module">Cartman</div> <!-- 4 -->
    <div class="module">Jack</div>    <!-- 0 -->
    <div class="module">Nancy</div>   <!-- 2 -->
</div>

私は（間違って）jQueryオブジェクトを並べ替えて、結果を追加するだけでよいと思いました。これはそうではありません。

4

3 に答える 3

9

order配列を繰り返し処理し、それに応じてDOM要素を再配置します。

var elements = [];
$.each(order, function(i, position) {
    elements.push($modules.get(position));
});

$('#moduleWrap').append(elements);

デモ

パフォーマンスを向上させるために、jQueryをますます削除することができます。例えば：

var wrapper = document.getElementById('moduleWrap');
for(var i = 0, l = order.length; i < l; i++) {
    wrapper.appendChild($modules.get(order[i]));
}

デモ

jQueryは物事を簡単にするので素晴らしいですが、高性能が必要な場合は、jQueryを使わない方がよいでしょう。

于 2012-10-31T00:14:38.817 に答える
1

私はこれが遅いことを知っていますが、多分それは誰かを助けるでしょう. 私は似たようなことをしようとしていたのですが、#Felix Kling の回答で 90% 達成できました。しかし、私の場合、次のように、注文値と等しい div id があります。

order    = [3,1,4,0,2];

<div id="0" class="module">Jack</div>    <!-- 0 -->
<div id="1" class="module">Jill</div>    <!-- 1 -->
<div id="2" class="module">Nancy</div>   <!-- 2 -->
<div id="3" class="module">Tom</div>     <!-- 3 -->
<div id="4" class="module">Cartman</div> <!-- 4 -->

次に、位置の値を使用して要素を単純にプッシュできます

var elements = [];
$.each(order, function(i, position) {
    elements.push($('#'+position));
});

$('#moduleWrap').append(elements);
于 2014-08-31T14:14:22.610 に答える
1

これを試して。

要素を DOM ツリーから切り離すと、プロセスが高速化される場合があります。

$modules.detach();

var len = order.length,
    temp = [];

for( var i = 0; i < len; i++ ) {
  temp.push( $modules[ order[i] ] );
}

$("#moduleWrap").append( temp );

ここでフィドルhttp://jsfiddle.net/rEFu3/ </p>

于 2012-10-31T00:50:32.273 に答える