JS通过类按钮堆叠

Question

http://jsfiddle.net/Ad7GV/19/

<div id="10" class="owoc">banan</div> 
<div id="9" class="owoc">ananas</div> 
<div id="8" class="owoc">fasola</div> 
<div id="7" class="owoc">pomarancz</div> 
<div id="6" class="owoc">winogrono</div> 
<div id="5" class="owoc">ogorek</div> 
<div id="4" class="owoc">mango</div> 
<div id="3" class="owoc">seler</div> 
<div id="2" class="owoc">cebula</div> 
<div id="1" class="owoc">kiwi</div> 

<button onclick="sortABC()">sortuj alfabetycznie</button> 

var elements = document.getElementsByTagName('div'); 
var filtered = []; 
for (var i = 0; i < elements.length; i++) { 
    if (elements[i].className === "owoc") { 
     filtered.push(elements[i]); 
    } 
} 
var sorted = filtered.sort(function (a, b) { 
    return a.innerHTML > b.innerHTML; 
}); 

var parent = elements[0].parentNode; 

for (i = 0; i < sorted.length; i++) { 
    parent.appendChild(sorted[i]); 
} 

任何人都可以告诉我如何连接这个脚本对列表进行排序的onclick不为onload？我也不知道为什么按钮出现在顶部。

Answer 1

你可以在click事件上调用sortABC（）函数，但是你没有把它定义为一个函数。

http://jsfiddle.net/Ad7GV/20/

var sortABC = function(){ 
    var elements = document.getElementById('elements').children; 
    var filtered = []; 
    for (var i = 0; i < elements.length; i++) { 
     if (elements[i].className === "owoc") { 
      filtered.push(elements[i]); 
     } 
    } 
    var sorted = filtered.sort(function (a, b) { 
     return a.innerHTML > b.innerHTML; 
    }); 

    var parent = elements[0].parentNode; 

    for (i = 0; i < sorted.length; i++) { 
     parent.appendChild(sorted[i]); 
    } 
} 

为了不太排序的按钮，你可以用一个容器sortered元素，只检索该容器的孩子：

<div id = "elements"> 
    <div id="10" class="owoc">banan</div> 
    <div id="9" class="owoc">ananas</div> 
    <div id="8" class="owoc">fasola</div> 
    <div id="7" class="owoc">pomarancz</div> 
    <div id="6" class="owoc">winogrono</div>  
    <div id="5" class="owoc">ogorek</div> 
    <div id="4" class="owoc">mango</div> 
    <div id="3" class="owoc">seler</div> 
    <div id="2" class="owoc">cebula</div> 
    <div id="1" class="owoc">kiwi</div> 
</div> 
<button onclick="sortABC()">sortuj alfabetycznie</button>