在 div 的排序列表中插入新项目答案

【问题标题】：insert new item in a sorted list of divs在 div 的排序列表中插入新项目
【发布时间】：2012-10-02 17:50:27
【问题描述】：

<list>
    <div>abacus</div>
    <div>abstract paint</div>
    <div>australian coco</div>
     .........
     .........
     .........
    <div>mango</div>
    <div>parrot</div>
    <div>salt</div>
    <div>upi</div>
</list>

“list”标签位于 HTML 文档的 body 内...“list”标签包含超过 5000 个 div...因为它是一个非常大的数字，我展示了其中的一部分...

我需要根据这些 div innerHTML（innerHTML 仅包含字母和数字，没有符号）在这些 div 中按字母顺序插入一个新的 div（如 <div>apache</div>）......但问题是如果我使用insertBefore() 方法，我会得到列表末尾的 div...我该怎么做...？？

请不要使用任何 jQuery...只有 Javascript...

【问题讨论】：

您并没有真正重新排序 div，而是将新项目插入到已经排序的列表中，对吧？
是的...@Ates Goral...你是对的...但是我希望在插入新的 div 后对列表进行排序...

标签： javascript alphabetical

【解决方案1】：

 var list         = document.getElementsByTagName('list')[ 0 ],
     DOMitems     = list.getElementsByTagName('div'),
     items        = Array.prototype.slice.call( DOMitems );

function addItem( text ) {
    var position          = 0,
        newElem           = document.createElement('div');
        newElem.innerHTML = text;

    items.push( newElem );
    items.sort(function( a, b ) {
        return a.innerHTML.localeCompare( b.innerHTML );
    });

    position = items.indexOf( newElem );
    list.insertBefore( newElem, DOMitems[ position ] );
}

addItem('apache');

Fiddle

【讨论】：

【解决方案2】：

您使用 div 而不是 ul/li 似乎很奇怪。这是您可以做的一种方法。

var words = document.getElementById("wordsList")
var indexes = null;
function InsertItem(word) {
    if (!indexes) {
        getItems();
    }        
    indexes.push(word);
    console.log(indexes);
    indexes.sort();
    var position = indexes.indexOf(word);
    var list = words.getElementsByTagName("div");    
    var newDiv = document.createElement("div");
    newDiv.innerHTML = word;
    words.insertBefore(newDiv, list[position]);
}
function getItems(){
    var elems = words.getElementsByTagName("div");
    indexes = [];
    for (var i=0;i<elems.length;i++) {
        indexes.push(elems[i].innerHTML);
    }
}

InsertItem("apple");
InsertItem("aaaaa");
InsertItem("zzzzz");

JSFiddle

【讨论】：

你可以改变它以满足你的需要，我的例子有一个，看fiddle。我相信你足够聪明，能弄清楚这一点。

【解决方案3】：

您似乎知道要插入什么 div-nr，您可能会使用： insertBefore(node,yourlist.childNodes[(nr-1)*2])

<!DOCTYPE html>
<meta charset=UTF-8>
<title>Insert</title>

<list id=alist>
<div>abacus</div>
<div>abstract paint</div>
<div>australian coco</div>
<div>mango</div>
<div>parrot</div>
<div>salt</div>
<div>upi</div>
</list>

<script>
var nr = 3,//insert before the third div
alist = document.getElementById('alist'),
node = document.createElement('div');
node.innerHTML = 'apache';

alist.insertBefore(node,alist.childNodes[(nr-1)*2]);
</script>

【讨论】：