JavaScript。按照孩子的價值排序排序

需要JS的幫助。我想弄清楚如何使用子元素的值來對一堆div進行排序。我在這裏找到了一個解決方案，並嘗試修改它，但目前還沒有運氣。請給我一些建議。謝謝JavaScript。按照孩子的價值排序排序

這個想法是根據他們的「年齡」元素排序div.person。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Sort list items alphabetically with Javascript</title> 
     <script type="text/javascript"> 

     function sortUnorderedList(div, sortDescending) { 
      if(typeof div == "number") 
      div = document.getElementById(div); 

      var lis = div.getElementsByClassName("person"); 
      var vals = []; 

      for(var i = 0, l = lis.length; i < l; i++) 
      vals.push(lis[i].innerHTML); 

      vals.sort(); 

      if(sortDescending) 
      vals.reverse(); 

      for(var i = 0, l = lis.length; i < l; i++) 
      lis[i].innerHTML = vals[i]; 
     } 

     window.onload = function() { 
      var desc = false; 
      document.getElementById("test").onclick = function() { 
      sortUnorderedList("list", desc); 
      desc = !desc; 
      return false; 
      } 
     } 

     </script> 
    </head> 
    <body> 
     <input type="button" id="test" value="Sort List"/> 
     <div id="list"> 
      <div class="person"> 
       <div>Jack</div> 
       <div>Plumber</div> 
       <div class="info"> 
        <span class="age">24</span> 
        <span class="hair-color">Blonde</span> 
       </div> 
      </div> 

      <div class="person"> 
       <div>Jill</div> 
       <div>Actress</div> 
       <div class="info"> 
        <span class="age">18</span> 
        <span class="hair-color">Gray</span> 
       </div> 
      </div> 

      <div class="person"> 
       <div>John</div> 
       <div>Driver</div> 
       <div class="info"> 
        <span class="age">37</span> 
        <span class="hair-color">Brown</span> 
       </div> 
      </div> 
     </ul> 
    </body> 
</html>

來源

2016-02-28 be well

當然你的意思是'如果（typeof運算DIV == 「字符串」）'你有沒有發現 – Bergi

哪些解決方案？請鏈接它 - 並告訴我們您嘗試修改它！ – Bergi

這是一個原創的解決方案 - http://jsfiddle.net/stodolaj/De8Ku/。我在這裏展示的是我的嘗試。 –

我改一下代碼，使之成爲自己的可讀性。

首先我通過類名「person」獲得所有的htmlNode，雖然這會返回一個htmlCollection，它是array-ish而不是數組。
因此，我將它轉換爲下一行的數組，因此我可以對其執行數組方法，如「排序」。您可以換出我爲不同種類的排序而編寫的不同compareFunctions。
排序後，我清空列表元素的現有內容，並用for循環再次填充它。

function sortUnorderedList(list, sortDescending) { 
 
    var htmlCollection = list.getElementsByClassName("person"), 
 
    elements = [].slice.call(htmlCollection); //convert htmlCollection to array 
 

 
    //sort by ... 
 
    //elements.sort(compareNames); 
 
    //elements.sort(compareJobs); 
 
    elements.sort(compareAges); 
 

 
    if (sortDescending) elements.reverse(); 
 

 
    list.innerHtml = ''; //remove current contents 
 

 
    for (var i = 0; i < elements.length; i++) { 
 
    list.appendChild(elements[i]); //add them again in different order 
 
    } 
 

 
    function compareNames(el1, el2) { 
 
    //innerText of the first child of each element is the name 
 
    if (el1.children[0].innerText < el2.children[0].innerText) return -1; 
 
    if (el1.children[0].innerText > el2.children[0].innerText) return 1; 
 
    return 0; 
 
    } 
 

 
    function compareJobs(el1, el2) { 
 
    //innerText of the second child of each element is the job 
 
    if (el1.children[1].innerText < el2.children[1].innerText) return -1; 
 
    if (el1.children[1].innerText > el2.children[1].innerText) return 1; 
 
    return 0; 
 
    } 
 

 
    function compareAges(el1, el2) { 
 
    var age1 = parseInt(el1.children[2].children[0].innerText), 
 
     age2 = parseInt(el2.children[2].children[0].innerText); 
 
    if(isNaN(age1))age1=-1; 
 
    if(isNaN(age2))age2=-1; 
 
    return age1 - age2; 
 
    } 
 
} 
 
window.onload = function() { 
 
    var desc = false; 
 
    document.getElementById("test").onclick = function() { 
 
    sortUnorderedList(document.getElementById('list'), desc); 
 
    desc = !desc; 
 
    return false; 
 
    }; 
 
};

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Sort list items alphabetically with Javascript</title> 
 
</head> 
 

 
<body> 
 
    <input type="button" id="test" value="Sort List" /> 
 
    <div id="list"> 
 
    <div class="person"> 
 
     <div>Jack</div> 
 
     <div>Plumber</div> 
 
     <div class="info"> 
 
     <span class="age">24</span> 
 
     <span class="hair-color">Blonde</span> 
 
     </div> 
 
    </div> 
 

 
    <div class="person"> 
 
     <div>Jill</div> 
 
     <div>Actress</div> 
 
     <div class="info"> 
 
     <span class="age">0</span> 
 
     <span class="hair-color">Gray</span> 
 
     </div> 
 
    </div> 
 

 
    <div class="person"> 
 
     <div>John</div> 
 
     <div>Driver</div> 
 
     <div class="info"> 
 
     <span class="age"></span> 
 
     <span class="hair-color">Brown</span> 
 
     </div> 
 
    </div> 
 
    </ul> 
 
</body> 
 

 
</html>

來源

2016-02-28 15:34:16 sniels

非常感謝，它的工作原理。但是，如果我在「年齡」元素內沒有任何價值，我又該如何調整呢？現在它會被視爲「0」，但我希望空的元素總是在列表的底部，不參與排序過程。 –

如果您在年齡元素中沒有任何價值，它將被視爲NaN。我試過擺弄它，但我從來沒有得到期望的結果。也許別人可以幫忙。 – sniels

@bewell，我發現如何去做，檢查isNaN，如果它不是數字，則將年齡設置爲-1。 – sniels

JavaScript。按照孩子的價值排序排序

回答

相關問題