子要素に基づくJSソート親要素

Question

JavaScript divを子値（スパンの内容）にソートする必要があります。

私はすでにここに、このスレッドではJavaScriptのソートalgorthmが見つかりました： Easiest way to sort DOM nodes?

それだけの単純なリストですが。私は段落要素を見ない変更されたバージョンを持っていたい。

HTML

<div class="myclass"> 
    <p class="hide">1</p> 
    <span>2</span> 
    </div> 

    <div class="myclass"> 
    <p class="hide">2</p> 
    <span>1</span> 
    </div> 

    <div class="myclass"> 
    <p class="hide">3</p> 
    <span>4</span> 
    </div> 

    <div class="myclass"> 
    <p class="hide">4</p> 
    <span>1</span> 
    </div> 

JS

var list = document.getElementById('sortme'); 

var items = list.childNodes; 
var itemsArr = []; 
for (var i in items) { 
    // HERE I need to get to the SPAN Element but how? 
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes 
     itemsArr.push(items[i]); 
    } 
} 

itemsArr.sort(function(a, b) { 
    return a.innerHTML == b.innerHTML 
      ? 0 
      : (a.innerHTML > b.innerHTML ? 1 : -1); 
}); 

for (i = 0; i < itemsArr.length; ++i) { 
    list.appendChild(itemsArr[i]); 
} 

ここJSFiddleです。あなたが気づいたように、いくつかの変更がここにあります

var list = document.getElementById('sortme'); 

var nodesToSort = list.querySelectorAll('.myclass'); 

Array.prototype.map.call(nodesToSort, function(node) { 
    return { 
    node: node, 
    relevantText: node.querySelector('span').textContent 
    }; 
}).sort(function(a, b) { 
    return a.relevantText.localeCompare(b.relevantText); 
}).forEach(function(item) { 
    list.appendChild(item.node); 
}); 

：

Answer 1

は、ここに1つの可能なアプローチ（demo）です。私が言ったように

まず、あなたがソートされなければならないすべての項目を簡単にquerySelectorAllまたはgetElementsByClassname方法（私は主に一貫性の理由から、元を選択します）のいずれかで収集されているように、root.childNodesを使用する必要はありません。これにより、nodeTypeベースのフィルタリングが冗長化されます。

（実際には、それはあまりにもリンクの答えに冗長されているだろう、著者が代わりにchildNodesのchildrenプロパティを使用していた）

第二に、ソートヘルパー配列は現在ノードが、オブジェクトだけでは含まれています。 memoizationとも呼ばれるこの手法の目的は、DOMクエリの量を最小限に抑えてパフォーマンスを向上させることです。

（ここではあなたが<span>内の任意のインラインタグを無視して、ここではテキストのみに興味があるように見えるように私は、innerHTMLクエリtextContentに置き換えられてきた。それはそうではないなら、それをバック交換してください）最後に、元のものから別の変更を加えました。単純な文字列関数 - localeCompareを使用して二重比較（最初は==、次に>）を置き換えます。

そして、もちろん、今全体のプロセスは、オペレーションのチェーンとして構成されています

• 自分のメモ化分類基準
• と一緒に項目の配列を整理
が
• （再）追加この配列をソートします配列からリストへのノード

...中間変数やものは必要ありません。

---

それは構造が均一であるかどうかは明らかではありません（つまり、あなたは常に<span>内容に基づいて分類したいです）。 に基づいてソートする場合は、テキストを使用し、node.querySelector('span').textContentの代わりにnode.innerTextを使用することを検討してください。ただし、innerTextは、最新のブラウザーでサポートされていますが、定義によっては計算値が遅いことに注意してください。

Answer 2

ドキュメントオーダーを変更する代わりに、フレックスボックスとCSS order:プロパティを使用して、表示順序を変更することができます。