1

我想按列表项的内容对无序列表进行排序。默认情况下，我希望它按日期排序，并可以选择按名称按字母顺序排序。

<select id="test">
    <option selected="selected" value="date">Date</option>
    <option value="alphabetically">Alphabetically</option>
</select>
<ul id="list">
  <li><p class="name">Peter</p><span class="date">10.12.12</span></li>
  <li><p class="name">Mary</p><span class="date">06.01.13</span></li>
  <li><p class="name">Paul</p><span class="date">19.12.12</span></li>
  <li><p class="name">Allen</p><span class="date">21.12.12</span></li>
  <li><p class="name">James</p><span class="date">03.01.13</span></li>
  <li><p class="name">Vicki</p><span class="date">12.01.13</span></li>
  <li><p class="name">Brock</p><span class="date">01.01.13</span></li>
  <li><p class="name">Dana</p><span class="date">31.12.12</span></li>
  <li><p class="name">Frank</p><span class="date">16.12.12</span></li>
  <li><p class="name">Gil</p><span class="date">09.01.13</span></li>
  <li><p class="name">Helen</p><span class="date">14.01.13</span></li>
</ul>

到目前为止我的尝试：

function sortUnorderedList(ul, sortDescending) {
  if (typeof ul == "string") ul = document.getElementById(ul);
  var lis = ul.getElementsByTagName("li");
  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];
}
$(document).ready(function () {
  var desc = false;
  document.getElementById("test").onchange = function () {
    sortUnorderedList("list", desc);
    desc = !desc;
    return false;
  };
});
function sortDescending(a, b) {
  var date1 = $(a).find(".date").text();
  date1 = date1.split('.');
  date1 = new Date(date1[2], date1[1] - 1, date1[0]);
  var date2 = $(b).find(".date").text();
  date2 = date2.split('.');
  date2 = new Date(date2[2], date2[1] - 1, date2[0]);
  return date1 < date2 ? 1 : -1;
}
$(document).ready(function () {
  $('ul > li').sort(sortDescending).appendTo('ul');
});

当页面加载时，列表按“日期”跨度内容的值排序，在选择菜单更改时，它按字母顺序对列表进行排序。但是当我将它改回“日期”时，列表日期没有按降序正确排序。

http://jsfiddle.net/s2JxC/

有人可以帮忙吗？我希望按字母排序按类“名称”排序。与日期按“日期”类排序的方式相同。

干杯，合资企业

4

1 回答 1

4

你的代码有很大的逻辑缺陷。我已经更新了你的 jsfiddle。( http://jsfiddle.net/s2JxC/4/ )

您有一个sortUnorderedList()按字母顺序（升序和降序）sortDescending()排序的函数，并且您有一个使用日期对列表进行排序的函数（总是降序）。

我已经做到了，当您单击按字母顺序时，它总是按字母顺序排序，当您从下拉列表中选择日期时，它总是按日期（降序）排序。

其余的取决于您，您希望它如何实际工作。我希望这有帮助！

编辑：根据要求jsfiddle.net/s2JxC/7 < - 当您按字母顺序单击时，按“.name”的字母顺序排序。单击日期时按“.date”降序排序。

您之前所做的是在页面加载时按日期（降序）排序。当您按字母顺序和非字母顺序单击时，按字母顺序？（降序）当您单击日期时。

于 2013-01-14T05:39:22.807 回答