자바 스크립트 - div 컬렉션 채우기

Question

자바 스크립트 만 배우려고하므로 라이브러리 또는 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에 변경 사항을 반영할까요? 이를 위해 jQuery를 사용하는 경우

는

Answer 1

당신은, 물론 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/

를 호출하여 실제로 얻는 무엇 인을 NodeList를,에 sort() 기능을 사용할 수 없습니다 방법이 더 쉬울 것입니다. 참조 jQuery - Sorting div contents

Answer 2

문제는 getElementsByClassName은 배열이 아니라 nodeList을 반환합니다. 좋아, 나는 아주 바보이고 난 아직도 브라우저가이 방법을 구현하는 이유 주위에 내 머리 ...

당신이 생각 할 수있는 일, 먼저 배열하고보다 nodeList 변환됩니다 얻을 수 없다,라고해야 정렬을 수행

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

참고 정렬 기능 optionnal이며 첫 번째 값 후 정상적으로 전달된다. (비록 당신의 요소 목록에서 직접적으로 호출되었지만, .sort()은 어떤 것이 다른 것 앞에 올지 모르기 때문에 함수 매개 변수없이 아무것도 정렬하지 않을 것입니다.) 이것이 실제로 어떻게 작동하는지 이해하려면 MDN call 체크 아웃 설명을 참조하십시오. 장면 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Answer 3

노드를 정렬하는 것은 그렇게 간단하지 않습니다. 방해가 될 수있는 다른 노드를 처리해야 할 수도 있습니다. 여하튼, 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>