5

私は Javascript だけを学ぼうとしているので、ライブラリや jQuery を提案しないでください。

div のリストがあり、ユーザーが値で並べ替えられるようにしたいと考えています。例えば：

<button onclick="sort();">Test</button>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">8</div>
<div class="num">1</div>

JS:

function sort(){
   var elements = document.getElementsByClassName("num");
   elements.sort();
}

これのどこが悪いのか、はっきりとした答えは見つかりません。getElementsByClassNameその名前の各 div の値の配列を返しますか? 配列がソートされたときに、変更をdivに反映するにはどうすればよいですか?

4

3 に答える 3

5

NodeList で関数を使用することはできませんsort()。これは、呼び出して実際に取得しているものです。getElementsByClassName

var elems = document.getElementsByClassName("num");

// convert nodelist to array
var array = [];
for (var i = elems.length >>> 0; i--;) { 
    array[i] = elems[i];
}

// perform sort
array.sort(function(a, b) {
    return Number(a.innerHTML) - Number(b.innerHTML);      
});

// join the array back into HTML
var output = "";
for (var i = 0; i < array.length; i++) { 
    output += array[i].outerHTML;
}

// append output to div 'myDiv'
document.getElementById('myDiv').innerHTML = output;

http://jsfiddle.net/UydrZ/7/

もちろん、これに jQuery を使用している場合は、はるかに簡単になります。jQuery - div コンテンツの並べ替えを参照してください。

于 2013-06-04T04:05:05.557 に答える
0

問題は、配列ではなくをgetElementsByClassName返すことです。nodeListわかりました、私は言わなければなりません、それは非常にばかげており、ブラウザーがこのように実装した理由をまだ理解できません...

ただし、できることは、最初にnodeListを配列に変換してから、並べ替えを行うことです。

var elems = Array.prototype.slice.call(elements);
elems.sort(/* function (a, b) {} */);

並べ替え関数はオプションであり、通常は最初の値の後に渡されることに注意してください。（ただし、要素リストで直接呼び出され.sort()た場合、関数パラメーターなしでは何もソートされません。どちらが他の前に来るかわからないためです）

callこれが舞台裏で実際にどのように機能するかを理解するには、MDNの説明を確認してください: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

于 2013-06-04T04:05:19.457 に答える
0

ノードの並べ替えはそれほど単純ではありません。邪魔になる可能性のある他のノードに対処する必要がある場合があります。とにかく、NodeList または HTMLCollection を受け取り、それを配列に変換し、並べ替えてから、ノードを元の順序に戻す関数を次に示します。要素は親要素の下部に戻されるため、他の要素はすべて上部に配置されることに注意してください。とにかく、適応できるアプローチを示しています。

DOM メソッドを使用する方法を含め、他にも多くの方法がありますが、マークアップの変更に基づくものには注意してください。また、要素の複製には注意してください。これは、リスナーに望ましくない副作用をもたらす可能性があるためです (ブラウザーや追加方法によって、要素が削除される場合とされない場合があります)。

<script type="text/javascript">

function getText(el) {
  return el.textContent || el.innerText || '';
}

function sortElements(nodeList) {
  // Assume there's a common parent
  var node, parentNode = nodeList[0].parentNode

  // Define a sort function
  function sortEls(a, b) {
    var aText = getText(a);
    var bText = getText(b);
    return aText == bText? 0 : aText < bText? -1 : 1;
  }

  // Convert nodelist to an array and remove from the DOM at the same time
  var a = [], i = nodeList.length;
  while (i--) {
    a[i] = parentNode.removeChild(nodeList[i]);

  }

  // Sort the array
  a.sort(sortEls);

  // Put elements back in order
  i = 0;
  while (node = a[i++]) {
    parentNode.appendChild(node);
  }
}

</script>

<div>0</div>
<div>4</div>
<div>2</div>
<div>3</div>
<div>5</div>
<button onclick="sortElements(document.getElementsByTagName('div'))">Sort</button>
于 2013-06-04T05:26:34.547 に答える