javascript - 按元素值对列表进行排序

Question

我正在尝试按每个列表项的子元素对列表进行排序。我有一个分数，并希望按分数对列表进行排序。

jsFiddle

var ordering = 'asc';

    function orderList(listID) {
        var container = document.getElementById(listID);
        var contents = container.querySelectorAll("li");

        var list = [];
        for(var i=0; i<contents.length; i++){
            list.push(contents[i]);
        }

        list.sort(function(a, b){
            var aa = parseInt(a.innerHTML);
            var bb = parseInt(b.innerHTML);
            return aa < bb ? -1 : (aa > bb ? 1 : 0);
        });

        if (ordering === 'asc') {
            list.reverse();
            ordering = 'desc';
        } else {
            ordering = 'asc';
        }

        for(var i=0; i<list.length; i++){
            container.insertBefore(list[i], container.firstChild);
        }

    }

    $('body').on('click', '.order', function(){
        orderList('list');
    });

我不想使用任何插件，只想使用 JavaScript 或 jQuery。

Answer 1

由于您使用的是 jQuery，因此可以简化为

var ordering = 1;

function orderList(listID) {
  var container = $('#' + listID);

  container.children().sort(function(a, b) {
    var aa = parseInt($(a).find('.score').text(), 10);
    var bb = parseInt($(b).find('.score').text(), 10);
    return (aa - bb) * ordering;
  }).appendTo(container);

  ordering *= -1;
}

$('body').on('click', '.order', function() {
  orderList('list');
});

ul,
li {
  display: inline-block;
}
li {
  background-color: #eaeaea;
  position: relative;
  float: left;
  margin-bottom: 5px;
}
.score {
  position: absolute;
  top: 30px;
  left: 20px;
  font-size: 50px;
}
.content {
  position: relative;
  float: left;
  padding-left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="order">Order <i>Asc</i></span>

<ul id="list" class="list">
  <li class="list-item">
    <strong class="score">5</strong>
    <blockquote class="content">
      Pellentesque ligula nibh, lacinia eget pharetra ut, vulputate vitae odio. Donec non mattis nisi. Pellentesque elit leo, tincidunt nec felis vitae, aliquet imperdiet purus. In elit ante, vestibulum non accumsan at, volutpat eget dolor. Quisque ut tincidunt
      elit. Curabitur rutrum dignissim enim ac aliquet. Curabitur et aliquam nisl.
      <cite>Malcolm Reynolds</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">8</strong>
    <blockquote class="content">
      Duis ac nisi id lorem rhoncus tempus eu sit amet nisi. Aenean ultrices congue ligula, ac molestie velit ultricies a. Nulla ac nunc et nisi placerat interdum sit amet ut erat. Integer vulputate nulla id orci cursus, eget ullamcorper justo ultricies. Nulla
      lorem dui, euismod non porttitor eu, sagittis in lacus. In suscipit lectus non viverra luctus. Pellentesque egestas, dolor at luctus eleifend, velit dui viverra risus, ac rutrum sapien ante at massa. Donec imperdiet consequat laoreet.
      <cite>Zoe Washburne</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">3</strong>
    <blockquote class="content">
      Etiam posuere, magna sit amet ullamcorper auctor, odio urna tempor velit, sit amet tincidunt lorem diam a velit. Integer a dapibus nunc. In iaculis vel sem ut gravida.
      <cite>Hoban Washburne</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">10</strong>
    <blockquote class="content">
      Etiam condimentum sodales dui in vestibulum. Vivamus euismod egestas porttitor. Proin dictum tempor euismod. Suspendisse elit nulla, elementum eu ornare in, tempus in massa. Proin elit sem, posuere nec tempor eget, suscipit sit amet dui. Aliquam in vehicula
      lorem. Praesent vitae vestibulum ante, nec vestibulum metus. Morbi commodo diam in leo semper ornare. Phasellus et diam magna.
      <cite>Inara Serra</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">9</strong>
    <blockquote class="content">
      Maecenas cursus ut erat vitae vestibulum. Fusce feugiat dignissim augue consequat condimentum. Donec risus felis, ultricies a velit sed, varius ullamcorper enim. Suspendisse ultrices non tortor non lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit.
      <cite>Jayne Cobb</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">4</strong>
    <blockquote class="content">
      Donec adipiscing lacus sed neque cursus ullamcorper. Vestibulum tellus lectus, molestie vitae augue et, egestas convallis mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec porttitor mi vitae mauris aliquam,
      non accumsan odio tincidunt. Aliquam semper enim quam, ac cursus lectus dignissim vitae. Suspendisse nec rutrum ligula.
      <cite>Kaylee Frye</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">7</strong>
    <blockquote class="content">
      Nullam et leo placerat lectus fringilla varius vel a lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh eros, blandit at aliquam eu, ullamcorper eu diam. Etiam id viverra lacus, rutrum suscipit nulla. Maecenas adipiscing, mi sit
      amet iaculis congue, urna massa vestibulum tortor, a tempus nibh tortor id dui.
      <cite>Simon Tam</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">2</strong>
    <blockquote class="content">
      Maecenas semper, orci eget cursus aliquam, orci tellus sodales urna, nec varius nisi arcu gravida velit. Proin ultrices egestas nunc, eget dapibus erat sollicitudin in. Fusce fermentum dignissim ipsum sollicitudin tincidunt. Aliquam erat volutpat. Suspendisse
      in ornare ante.
      <cite>River Tam</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">10</strong>
    <blockquote class="content">
      Nullam purus ante, rhoncus ac malesuada at, bibendum nec urna. Cras lobortis viverra feugiat. Praesent sapien elit, sagittis vel orci sed, congue consequat nulla.
      <cite>Derrial Book</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">9</strong>
    <blockquote class="content">
      Donec malesuada semper lectus sed sagittis. Sed laoreet consectetur tortor, ac tempus ipsum malesuada non. Aenean dapibus leo sed sapien rhoncus, at dapibus ligula porta. Morbi tincidunt, urna eget ullamcorper aliquam, augue lectus placerat orci, tristique
      aliquet ipsum nisi id orci. Nulla vulputate lectus justo, eu dapibus lectus sodales ac. Donec volutpat nibh mi. Proin eu justo vitae dolor accumsan ultrices vel non ante.
      <cite>Sheriff Bourne</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">3</strong>
    <blockquote class="content">
      Sed consectetur, lorem vitae laoreet tempus, neque elit fringilla nisl, nec tempus urna quam eu nulla. Nunc tempor nec magna vel viverra. In dapibus aliquam velit, ut malesuada nibh ornare eget. Suspendisse in risus posuere, hendrerit odio id, tincidunt
      lacus. Nunc fermentum metus sit amet mauris pellentesque, vitae sollicitudin dui facilisis. Etiam at velit id dolor rhoncus porttitor. Vestibulum quis blandit felis.
      <cite>Lawrence Dobson</cite>
    </blockquote>
  </li>
  <li class="list-item">
    <strong class="score">7</strong>
    <blockquote class="content">
      Suspendisse in risus posuere, hendrerit odio id, tincidunt lacus. Nunc fermentum metus sit amet mauris pellentesque, vitae sollicitudin dui facilisis. Etiam at velit id dolor rhoncus porttitor. Vestibulum quis blandit felis.
      <cite>Jubal Early</cite>
    </blockquote>
  </li>
</ul>