DOMをトラブレートする - アルファベット順

Question

私はページにリンク/イメージのペアのリストを持っています。

たとえば、以下のソーシャルページにはTwitter、Facebookなどの2つのリンクがあります。画像に名前が表示されませんでした。

これらをトラバースし、アルファベット順に挿入して挿入する必要があります。次のように

だから私は、ページのIDをつかむ：

var element_iterator = document.getElementById('social_page'); 

今、私は2つのリンクTwiiterやFacebookを含む「ページ」を持って、私は見つけるために、これを横断しないか、私はQuoraのをはめ込みしてみたいと思います。ポイントを挿入します。

どのように私は、DOMとすると、タイトルに基づいてalphaetical挿入を横切ることができる。

ブロークン・コード

var page_element = document.getElementById(form_elements.tag.value + '_page'); 
var element_iterator = page_element.firstChild;  
while(!!(element_iterator = element_iterator.nextSibling)) 
{ 
    if(typeof element_iterator.tagName === 'undefined') 
    { 
     page_element.insertBefore(image_element, element_iterator); 
     page_element.insertBefore(link_element, element_iterator); 
     break; 
    } 
    else if(element_iterator.tagName.toLowerCase() === 'a' && (link_element.innerHTML<element_iterator.innerHTML)) 
    { 
     element_iterator = element_iterator.previousSibling; 
     page_element.insertBefore(image_element, element_iterator); 
     page_element.insertBefore(link_element, element_iterator); 
     break; 
    } 
} 

Answer 1

のようなもの、たとえば、あなたはDOMノードのリストを持っているとしましょう：（要素は特定のIDの下位要素であることをスコープを取得するには

var links = document.getElementsByClassName("bookmark_link"); 

、

var links = document.querySelectorAll("#social_page .bookmark_link"); 

を試してみてください

）

あなたが望むプロパティがあるとしますRTによって、たとえばinnerTextのために：ここで

links[0].innerText === "Twitter" 
links[1].innerText === "Facebook" 
// etc. 

あなたがそれらのDOMノードのソートされた配列を取得する方法を次のとおりです。

// Convert the NodeList to a normal array, 
// since NodeList doesn't have a sort method. 
var linksArray = Array.prototype.slice.call(links); 

// Sort the array using a custom comparison function. 
linksArray.sort(function (a, b) { 
    return a.innerText.localeCompare(b.innerText); 
}); 

// linksArray is now sorted.