javascript - 遍历 DOM - 按字母顺序

Question

我在页面中有一个链接/图像对列表。

例如，下面的社交页面有两个链接 - Twitter、Facebook...图像未捕获名称。

我需要遍历这些并按字母顺序插入。

所以我按如下方式获取页面 ID:

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

现在我有了包含两个链接 Twiiter 和 Facebook 的“页面”。假设我想插入 Quora，如何遍历它来找到插入点。

如何遍历 DOM 并根据标题进行字母插入。

损坏的代码

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 节点列表，例如:

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

(要获取范围为特定 ID 的子元素的元素，请尝试

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

)

假设它们有一个您想要排序的属性，例如 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.