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/

誰でも助けてもらえますか？クラス「名前」でソートするためにアルファベット順でソートしたいと思います。日付がクラス「日付」でソートされるのと同じ方法です。

乾杯、JV

4

1 に答える 1

4

コードに大きな論理的欠陥があります。あなたのjsfiddleを更新しました。( http://jsfiddle.net/s2JxC/4/ )

sortUnorderedList()アルファベット順 (昇順および降順) に並べ替える関数と、日付 (常に降順) を使用してリストを並べ替える関数がありますsortDescending()。

アルファベット順をクリックすると常にアルファベット順にソートされ、ドロップダウンから日付を選択すると常に日付順 (降順) にソートされるようにしました。

残りは、実際にどのように機能させたいかはあなた次第です。これが役立つことを願っています！

編集: 要求どおり jsfiddle.net/s2JxC/7 <--アルファベット順にクリックすると、「.name」でアルファベット順にソートされます。日付をクリックすると、「.date」で降順にソートされます。

以前は、ページの読み込み時に日付 (降順) で並べ替えていました。アルファベット順と非アルファベット順でクリックすると、アルファベット順ですか？(降順) 日付をクリックしたとき。

于 2013-01-14T05:39:22.807 に答える