jQuery 根据所选参数对 ul 内的 li 进行排序

Question

我在 ul 中有多个 li，需要根据选择输入中选择的参数进行排序。我用来实现这一点的 jQuery 基本上是:

$("#SortBy").on('change', function() {

        var span = $(".divResult > ul.list > li > ul > li span:nth-child(2)")
        var spantoSort = $(".divResult > ul.list > li.Brand > ul > li." + $(this).find("option:selected").text() + " > span:nth-child(2)")

        spantoSort.sort(function(a, b) {
        return $(a).text().localeCompare($(b).text())
        }).each(function(new_Index) {
            var original_Index = $(this).index();

            span.each(function() {
            var Parentli = $(this).parents('.Brand');
            if (original_Index !== new_Index)
            Parentli.eq(original_Index).insertAfter(Parentli.eq(new_Index));
            });    
        });
    });
});

但由于某种原因，这并没有对“li”进行排序，而类似的代码可以在对表的列进行排序的情况下使用。

下面是完整的工作代码:

jQuery(document).ready(function($) {

  $("#SortBy").on('change', function() {

    var span = $(".divResult > ul.list > li > ul > li span:nth-child(2)")
    var spantoSort = $(".divResult > ul.list > li.Brand > ul > li." + $(this).find("option:selected").text() + " > span:nth-child(2)")
    console.log(span, spantoSort);

    spantoSort.sort(function(a, b) {
      return $(a).text().localeCompare($(b).text())
    }).each(function(new_Index) {
      var original_Index = $(this).index();
      console.log(original_Index);

      span.each(function() {
        var Parentli = $(this).parents('.Brand');
        console.log(Parentli);
        if (original_Index !== new_Index)
          Parentli.eq(original_Index).insertAfter(Parentli.eq(new_Index));
      });
    });

  });

});

ul.list {
  border-bottom: 2px solid #eee;
  font-size: 14px;
  margin: 0 0 20px 0;
  font-size-adjust: inherit;
  font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
}

ul.list.nrh {
  border-bottom: 2px solid #ddd;
}

ul.list.nrh>li {
  border-top: 2px solid #ddd;
}

ul.list,
ul.list>li>ul {
  padding: 0 !important;
  list-style: none !important;
}

ul.list>li>ul {
  margin: 0 !important;
}

ul.list>li .titles {
  background-color: rgb(58, 146, 7);
  display: block;
  color: #fff;
  padding: 10px;
  font-weight: 800;
}

ul.list>li>ul>li {
  font-weight: 200;
  border-bottom: 1px solid #eee;
  padding: 10px;
}

ul.list>li>ul>li:hover {
  background-color: #efefef
}

ul.list>li>ul>li:last-child {
  border-bottom: none;
}

ul.list ul>li .row_headers {
  font-size: 14px;
  max-width: 40%;
  float: left;
  margin-right: 3%;
}

ul.list ul>li .row_data {
  float: right;
  font-weight: 800;
  width: 57%;
}

ul.list>li>ul>li {
  *zoom: 1;
}

ul.list>li>ul>li:before,
ul.list>li>ul>li:after {
  content: " ";
  display: table;
}

ul.list>li>ul>li:after {
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Sort by:
<select id="SortBy">
  <option></option>
  <option>Ranking</option>
  <option>Rating</option>
</select>
<br></br>
<div id="divResult" class="divResult">
  <ul class="list" id="list">
    <li name="Samsung" class="Brand">
      <span class="titles">Samsung</span>
      <ul>
        <li class="Ranking">
          <span class="row_headers">Ranking</span>
          <span>3</span>
        </li>
        <li class="Rating">
          <span class="row_headers">Rating</span>
          <span>2.5</span>
        </li>
      </ul>
    </li>
    <li name="Mi" class="Brand">
      <span class="titles">Mi</span>
      <ul>
        <li class="Ranking">
          <span class="row_headers">Ranking</span>
          <span>2</span>
        </li>
        <li class="Rating">
          <span class="row_headers">Rating</span>
          <span class="row_html">3.5</span>
        </li>
      </ul>
    </li>
    <li name="Apple" class="Brand">
      <span class="titles">Apple</span>
      <ul>
        <li class="Ranking">
          <span class="row_headers">Ranking</span>
          <span class="row_html">1</span>
        </li>
        <li class="Rating">
          <span class="row_headers">Rating</span>
          <span class="row_html">4.5</span>
        </li>
      </ul>
    </li>
  </ul>
</div>

还包括 jsfiddle 供您引用:https://jsfiddle.net/mithunu/ejgdtbnk/2/

Answer 1

您可能不需要使用 new_index 重新排列每个 div，而只需将排序后的 li 直接插入到 ul

$("#SortBy").on('change', function() {

  var span = $(".divResult > ul.list > li")
  var option = $(this).val();

  span.sort(function(a, b) {
    a = $(a).find('li.' + option + ' span:nth-child(2)').text()
    b = $(b).find('li.' + option + ' span:nth-child(2)').text()
    return a.localeCompare(b)
  })

  $('#list').html(span);

});

ul.list {
  border-bottom: 2px solid #eee;
  font-size: 14px;
  margin: 0 0 20px 0;
  font-size-adjust: inherit;
  font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
}


/* Table with no row headers */

ul.list.nrh {
  border-bottom: 2px solid #ddd;
}


/* Table with no row headers columns */

ul.list.nrh>li {
  border-top: 2px solid #ddd;
}


/* Table defaults */

ul.list,
ul.list>li>ul {
  padding: 0 !important;
  list-style: none !important;
}


/* Inner list */

ul.list>li>ul {
  margin: 0 !important;
}


/* Table titles */

ul.list>li .titles {
  background-color: rgb(58, 146, 7);
  display: block;
  color: #fff;
  padding: 10px;
  font-weight: 800;
}


/* Table rows */

ul.list>li>ul>li {
  font-weight: 200;
  border-bottom: 1px solid #eee;
  padding: 10px;
}


/* Table rows hover */

ul.list>li>ul>li:hover {
  background-color: #efefef
}


/* Table last child row */

ul.list>li>ul>li:last-child {
  border-bottom: none;
}


/* Table row header */

ul.list ul>li .row_headers {
  font-size: 14px;
  max-width: 40%;
  float: left;
  margin-right: 3%;
}


/* Table row data */

ul.list ul>li .row_data {
  float: right;
  font-weight: 800;
  width: 57%;
}


/* Clearfix */

ul.list>li>ul>li {
  *zoom: 1;
}

ul.list>li>ul>li:before,
ul.list>li>ul>li:after {
  content: " ";
  display: table;
}

ul.list>li>ul>li:after {
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Sort by:
<select id="SortBy">
  <option></option>
  <option>Ranking</option>
  <option>Rating</option>
</select>
<br><br>
<div id="divResult" class="divResult">
  <ul class="list" id="list">
    <li name="Samsung" class="Brand">
      <span class="titles">Samsung</span>
      <ul>
        <li class="Ranking">
          <span class="row_headers">Ranking</span>
          <span>3</span>
        </li>
        <li class="Rating">
          <span class="row_headers">Rating</span>
          <span>2.5</span>
        </li>
      </ul>
    </li>
    <li name="Mi" class="Brand">
      <span class="titles">Mi</span>
      <ul>
        <li class="Ranking">
          <span class="row_headers">Ranking</span>
          <span>2</span>
        </li>
        <li class="Rating">
          <span class="row_headers">Rating</span>
          <span class="row_html">3.5</span>
        </li>
      </ul>
    </li>
    <li name="Apple" class="Brand">
      <span class="titles">Apple</span>
      <ul>
        <li class="Ranking">
          <span class="row_headers">Ranking</span>
          <span class="row_html">1</span>
        </li>
        <li class="Rating">
          <span class="row_headers">Rating</span>
          <span class="row_html">4.5</span>
        </li>
      </ul>
    </li>
  </ul>
</div>