2 
<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>apache</div>これらのdivにアルファベット順に 新しいdiv（のような）を挿入する必要がありますinnerHTML（innerHTMLアルファベットと数字のみを含み、記号はありません）...しかし、問題は、insertBefore()メソッドを使用すると、最後にdivを取得することです。リスト...どうすればそれができますか...??

jQueryは使用しないでください...Javascriptのみ...

4

3 に答える 3

2

ul/li ではなく div を使用しているのは奇妙に思えます。これは、実行できる 1 つのアプローチです。

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

于 2012-10-02T18:08:23.513 に答える
2 
 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');

フィドル

于 2012-10-02T18:06:49.147 に答える
0

挿入したい 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>
于 2012-10-02T18:53:56.093 に答える