Question

需要JS的帮助。我试图弄清楚如何使用其子元素的值来对一堆div进行排序。我在堆栈上找到了一个解决方案并尝试修改它但到目前为止没有运气。拜托，给我一些建议。谢谢

这个想法是根据他们的＆＃34;年龄＆＃34;对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>

Answer 1

我稍微更改了代码，使其对我自己更具可读性。

首先，我按类名＆＃34; person＆＃34;获取所有htmlNode，但这将返回一个htmlCollection，它是array-ish但不是数组。
因此我将它转换为下一行的数组，因此我可以在其上执行数组方法，例如＆＃39; sort＆＃39;。您可以换出我为不同类型的排序编写的不同compareFunction 排序后，我清空list-element的现有内容，并用for循环再次填充。

＆＃13;

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;
  };
};

＆＃13;

<!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>

＆＃13;

JavaScript的。按孩子的价值排序

1 个答案: