9

JavaScript (jQuery ではない) のみを使用して、アイテム (この場合は文字列) を正しいアルファベット順に挿入する最も効率的な方法は何だろうか。アイテムを挿入した直後にリストを並べ替えるだけで十分だと思いましたが、うまくいきません。テキストフィールドに入力された値を介して挿入される値を取得しています。

新しい項目を挿入する前のリストは次のようになります。

  • アルバトロス
  • ファンテイル
  • ケア
  • キウイ
  • たかへ
  • トゥイ

このリストに「Bellbird」を追加すると、リストは次のようになります。

  • アルバトロス
  • ベルバード
  • ファンテイル
  • ケア
  • キウイ
  • たかへ
  • トゥイ

目的の結果を達成しようとするために使用しているコードは次のとおりです。

HTML:

<ul id="birds">
  <li>Albatross</li>
  <li>Fantail</li>
  <li>Kea</li>
  <li>Kiwi</li>
  <li>Takahe</li>
  <li>Tui</li>
</ul>

<p><label for="addNewBirdField">Add new bird: </label>
   <input type="text" id="addNewBirdField" /></p>

<p><button id ="addItem">Add new bird</button></p>

JavaScript:

function addNewBird()
{
  var birdList = document.getElementById("birds"); //get birds unordered list

  var newBirdItem = document.createElement("li"); // create new li element

  var bird = document.getElementById("addNewBirdField").value // get data from form field

  var birdValue = document.createTextNode(bird); // create new textNode with value from previous step

  newBirdItem.appendChild(birdValue); // append textNode from previous step to li element (newBirdItem)

  birdList.appendChild(newBirdItem); // append li element to bird list

  birdList.sort();
}

var addItem = document.getElementById("addItem");
addItem.onclick = addNewBird;

配列の並べ替えに関するこのリンクを見てきました(プログラミングに関する私の知識では、各リスト要素が配列内にあると想定しています)。辞書順ソートとは何かを理解しています。これは今週初めに学びました。

誰かがこれについて私を助けることができれば、とても感謝しています.

4

2 に答える 2

8 
birdList.sort();

によって返される値document.getElementById()は決してではないため、これは機能しません。要素Arrayへの参照であるnullか、要素が見つからなかった場合です。Arrays（デフォルト）のみがsort()メソッドを持っています。

代わりに、あなたが欲しいのは...

var birds = birdList.getElementsByTagName("li");

birds = Array.prototype.slice.call(birds).sort(function(a, b) {
    return a.firstChild.data.toLowerCase().localeCompare(b.firstChild.data.toLowerCase());
});

for (var i = 0, length = birds.length; i < length; i++) {
    birdList.appendChild(birds[i]);
}

jsFiddle。

古いブラウザをサポートする必要がなかった場合...

var birds = birdList.querySelectorAll("li");

birds = Array.prototype.slice.call(birds).sort(function(a, b) {
    return a.textContent.toLowerCase().localeCompare(b.textContent.toLowerCase());
}).forEach(function(bird) {
    birdList.appendChild(bird);
});

jsFiddle。

最後に、jQueryを自由に使用できる場合...

$(birdList).find("li").sort(function(a, b) {
    return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase());
}).each(function() {
    $(birdList).append(this);
});

jsFiddle。

于 2012-09-22T09:54:55.477 に答える
3

リスト全体を再ソートして、すべての項目を再挿入する必要はありません。

並べ替えられたリスト内の位置を見つけて、新しいアイテムを挿入することができます。

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Test Page</title>


<script>
function addNewBird(){
    var bird= document.getElementById("addNewBirdField").value;
    if(bird){
        bird= bird.charAt(0).toUpperCase()+ bird.substring(1).toLowerCase();
        var birdList= document.getElementById("birds"),
        list= birdList.getElementsByTagName('li'),
        i= 0, who= list[0],

        newBirdItem= document.createElement("li");
        newBirdItem.appendChild(document.createTextNode(bird));

        while(who && who.innerHTML<bird) who= list[++i];
        if(who) birdList.insertBefore(newBirdItem, who);
        else birdList.appendChild(newBirdItem);
    }
    return newBirdItem;
}

</script>
</head>
<body>

<div>
<ul id="birds">
  <li>Albatross</li>
  <li>Fantail</li>
  <li>Kea</li>
  <li>Kiwi</li>
  <li>Takahe</li>
  <li>Tui</li>
</ul>

<p><label for="addNewBirdField">Add new bird: </label>
<input type="text" id="addNewBirdField" /></p>

<p><button id ="addItem" onclick="addNewBird()">Add new bird</button></p>
</div>

</body>
</html>
于 2012-09-22T14:24:00.967 に答える