PHPでの時間取得及び反映について

Question

PHPでエステサロンの出勤システムを作っています。
以下のコードで、出勤時間順にコンテンツを取得反映するようにしています。

しかし30分と入力すると順番が反対になってしまいます。

どのように書き換えれば、順番を正しく取得できるでしょうか？

<h2 class="schedule_page_h2">
<?php echo $str2; ?>の出勤情報</h2>
<span class="bottime head" style="display:none;"><?php var_dump($h2dateTime); ?></span>

<div class="schedule_image_box_sec">
<div class="custom_row sort_js_wrap">
<?php
$total_count = 0;
$posts_per_page = 20;
$pageno = 1;

if(isset($_GET['pageno'])) $pageno = $_GET['pageno'];
$search_key = array(
    'post_type' => 'therapist',
    'posts_per_page' => $posts_per_page,
    'paged' => $pageno,
);
				
$item_query = new WP_Query($search_key);
$total_count = $item_query->found_posts;
if($item_query->have_posts()) : 
	while ($item_query->have_posts()) :
		$item_query->the_post();
		$loop_id = get_the_ID();
		$loop_tname = get_post_field( 'name', $loop_id );
		$loop_age = get_post_field( 'age', $loop_id );
		$loop_url = get_the_permalink();
		$loop_photo = get_post_field('therapist_img1', $loop_id);
		if(empty($loop_photo)) $loop_photo = get_stylesheet_directory_uri().'/images/noimage.jpg';
		$loop_twitter = get_post_field('twitter', $loop_id);
		$loop_twitter = str_replace('@', '', $loop_twitter);
		if(!empty($loop_twitter)) $loop_twitter = 'https://twitter.com/'.$loop_twitter;
		$dateTime = new DateTime();
		$settime = '+'.$day_get.' day -3 hour';
		$dateTime->modify($settime);
		$schedule_list = [];
		$baseDateTime = $dateTime->format('Y-m-d H:i:s');
		$workDate = get_date_from_gmt($baseDateTime, 'Ymd');
		$open_hh = get_post_meta($loop_id, $workDate.'open_hh', true);
		$open_mi = get_post_meta($loop_id, $workDate.'open_mi', true);
		$close_hh = get_post_meta($loop_id, $workDate.'close_hh', true);
		$close_mi = get_post_meta($loop_id, $workDate.'close_mi', true);
			
		$month = get_date_from_gmt($baseDateTime, 'm');
		$day = get_date_from_gmt($baseDateTime, 'd');
		if(!empty($open_hh) && !empty($open_mi) && !empty($close_hh) && !empty($close_mi)):
			$worktime = '<span class="sort_js">'.$open_hh.'</span>：'.$open_mi.'～'.$close_hh.'：'.$close_mi;


?>


<div class="custom_col_3 js_button" data-href="<?php echo $loop_url;?>">
				<div class="schedule_image_box">
						<div class="schedule_image_box_image">
							<img src="<?php echo $loop_photo; ?>">
						</div>
<?php 		if(!empty($loop_twitter)): ?>
						<a href="<?php echo $loop_twitter; ?>" class="twitter_btn"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/twitter.png"></a>
<?php		endif; ?>
						<a href="<?php echo $loop_url;?>" class="schedule_btn light_purple"><?php echo $loop_tname; ?>(<?php echo $loop_age; ?>)</a>
						<a href="<?php echo $loop_url;?>" class="schedule_btn dark_purple"><?php echo $worktime; ?></a>
					</div><!-- schedule_image_box -->
				</div><!-- custom_col_3 -->
<?php			
        endif;
	endwhile;
endif; ?>
<script>
$(function(){
	$('.sort_js_wrap').each(function(){
	$(this).html(
        $(this).find('.custom_col_3').sort(function(a,b){
			            return $(a).find('.sort_js').text() - $(b).find('.sort_js').text();
		})
    );//html
	});//each
});
</script>	

Comments

[FKM]

本当に出勤時間の昇順で並んでいるのでしょうか？
退勤時間の降順で並んでいる可能性も考えられないでしょうか？
数値を変更して検証してみてください。

Answer 1

文字列でのソートになっているようです。日付に対応したソートに変える必要があります。

$(function(){
    $('.sort_js_wrap').each(function(){
    $(this).html(
        $(this).find('.custom_col_3').sort(function(a,b){
                       //return $(a).find('.sort_js').text() - $(b).find('.sort_js').text(); こっちだと文字列基準になっている
                        return new Date($(a).find('.sort_js').text()) - new Date($(b).find('.sort_js').text()); //未検証ですが、こんな感じになると思う
        })
    );//html
    });//each
});

このページを参考にして調整してみてください。
JavaScript：sort()を用いた並び替え方法のサンプル