sort()によるソート実装を行うとChromeで正しくソートされない件について
Chromeのみ、ソート結果が異なるjs
- ※Chromeで並べ替えを実行すると、2017年8月20日の「（1）（2）（3）（4）（5）」の順番が、liに付与されているdata-date=の値が同じ値であるにも関わらず、順番が変になります
- 2017年8月18日
- 2017年8月15日
- 2017年8月23日
- 2017年8月20日（1）
- 2017年8月21日
- 2017年8月20日（2）
- 2017年8月20日（3）
- 2017年8月19日
- 2017年8月20日（4）
- 2017年8月26日
- 2017年8月20日（5）
<ul class="list-bullet-01 test_1">
<li data-date="2017-08-18 00:00:00">2017年8月18日</li>
<li data-date="2017-08-15 00:00:00">2017年8月15日</li>
<li data-date="2017-08-23 00:00:00">2017年8月23日</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（1）</li>
<li data-date="2017-08-21 00:00:00">2017年8月21日</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（2）</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（3）</li>
<li data-date="2017-08-19 00:00:00">2017年8月19日</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（4）</li>
<li data-date="2017-08-26 00:00:00">2017年8月26日</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（5）</li>
</ul>
$('.btn_1').click(function(){
$('ul.test_1 li').each(function(){
var $date = $(this).attr('data-date');
dateFunc = function(){
$date = $date.replace(/-| /g, ':').split(':');
$date = new Date($date[0],$date[1]-1,$date[2],$date[3],$date[4],$date[5]);
return $date;
};
dateFunc($date);
date = $date.getTime();
$(this).attr('data-date',date);
});
$('ul.test_1').html(
$('ul.test_1').find('> li').sort(function(a,b){
return $(b).attr("data-date") - $(a).attr('data-date');
})
);
return false;
});
Chrome含め、全ブラウザ同じソート結果になるjs
- ※liのインデックス番号を減算することで全てのdata-dateの値をユニークになるよう調整することで、元の順番を維持したソートが行われます
- ※Chrome含め、各ブラウザで同じソート結果になると思います
- ※ただしこの方法は日付けのミリ秒など桁数が多いものでしか使えないので、1～100などの整数においても完全に対応する場合は別の代替手段が必要になります
- 2017年8月18日
- 2017年8月15日
- 2017年8月23日
- 2017年8月20日（1）
- 2017年8月21日
- 2017年8月20日（2）
- 2017年8月20日（3）
- 2017年8月19日
- 2017年8月20日（4）
- 2017年8月26日
- 2017年8月20日（5）
<ul class="list-bullet-01 test_2">
<li data-date="2017-08-18 00:00:00">2017年8月18日</li>
<li data-date="2017-08-15 00:00:00">2017年8月15日</li>
<li data-date="2017-08-23 00:00:00">2017年8月23日</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（1）</li>
<li data-date="2017-08-21 00:00:00">2017年8月21日</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（2）</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（3）</li>
<li data-date="2017-08-19 00:00:00">2017年8月19日</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（4）</li>
<li data-date="2017-08-26 00:00:00">2017年8月26日</li>
<li data-date="2017-08-20 00:00:00">2017年8月20日（5）</li>
</ul>
$('.btn_2').click(function(){
$('ul.test_2 li').each(function(){
var $date = $(this).attr('data-date');
var $liIndex = $(this).index();
dateFunc = function(){
$date = $date.replace(/-| /g, ':').split(':');
$date = new Date($date[0],$date[1]-1,$date[2],$date[3],$date[4],$date[5]);
return $date;
};
dateFunc($date);
date = $date.getTime();
date = parseInt(date) - $liIndex;
$(this).attr('data-date',date);
});
$('ul.test_2').html(
$('ul.test_2').find('> li').sort(function(a,b){
return $(b).attr("data-date") - $(a).attr('data-date');
})
);
return false;
});
デモの解説記事に戻る
