5

次のような順序付けられていないリストがあるとします。

<ul id="birds">
  <li>Bald Eagle</li>
  <li>Falcon</li>
  <li>Condor</li>
  <li>Albatross</li>
  <li>Parrot</li>
</ul>

プレーンな JavaScript (jQuery を含まない) では、このリストの順序を逆にして、次の予想される「出力」と一致するようにしたいと考えています。

<ul id="birds">
  <li>Parrot</li>
  <li>Albatross</li>
  <li>Condor</li>
  <li>Falcon</li>
  <li>Bald Eagle</li>
</ul>

これは、この目標を達成するためにコーディングを試みた JavaScript です。

var birdList = document.getElementById("birds").getElementsByTagName("li");
var birdListReverse = birdList.reverse();

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

現在のリスト項目を「逆」リストの項目で何らかの方法で上書きするだけで十分だと思いますが、そうではありません。リスト内のそれぞれをどうにかして操作する必要がnodeValueありますか?

ボタンがクリックされたときにこれを実行したいと思います。これは簡単な部分です。リストを逆にするテクニックを取得するだけで、少し苦労しました。

4

8 に答える 8

16

HTMLCollection は、ノードの読み取り専用ビューにすぎません。ノードを操作するには、さまざまな DOM 操作メソッドのいずれかを使用する必要があります。あなたの場合、たまたまショートカットがあります。子ノードを逆の順序で追加するだけです。

var birds = document.getElementById("birds");
var i = birds.childNodes.length;
while (i--)
  birds.appendChild(birds.childNodes[i]);

編集:何が起こっているかappendChildは、ノードを追加する前にドキュメントからノードを削除することです。これには 2 つの効果があります。a) ノードのリストのコピーを作成し、ノードを逆順に追加する前にノードを削除する必要がなくなります。b) 最後の子を追加するため、ノードの順序が逆になります。最初と最初の子リスト。

于 2012-09-21T23:30:40.970 に答える
1

このようにできます（プレーンなJavaScriptで）。タグを逆の順序で循環さliせて、親に追加することができます。これにより、順序が逆になる自然な効果が得られます。最後のものを取得してリストの最後に追加し、最後から 2 番目のものを取得してリストに追加します。最後から3番目のものを取得し、それをリストの最後に追加するなどすると、すべてのアイテムが逆になります。既に DOM にあるものに対して appendChild を使用すると、現在の場所から自動的に移動されることに注意してください (たとえば、追加される前に削除されます)。

var birds = document.getElementById("birds");
var birdList = birds.getElementsByTagName("li");
for (var i = birdList.length - 1; i >= 0; i--) {
    birds.appendChild(birdList[i]);
}​

作業例: http://jsfiddle.net/jfriend00/GLvxV/

于 2012-09-21T23:30:40.687 に答える
1 
var birds = document.getElementById('birds');

for(var i = 0, bll = birds.childNodes.length; i < bll; i++) {
  birds.insertBefore(birds.childNodes[i], birds.firstChild);
}
于 2012-09-21T23:33:28.060 に答える
0

DOM 自体から独立した単なるコレクション (a) であるため、を操作しbirdListても要素の順序は変更されません。birdListNodeList

実際には、要素への参照を取得してから、and - Maybe<ul id="birds">の組み合わせを使用する必要があります。removeChild(...)appendChild(...)insertBefore()

于 2012-09-21T23:32:12.963 に答える
0

テストされていませんが、試してください：

var parent = document.getElementById("birds");
var birdList = parent.getElementsByTagName("li");

for(var i = birdList.length-1; i > 0; --i) {
    parent.appendChild(birdList[i];
}
于 2012-09-21T23:32:41.237 に答える