javascript - 一个关于淘宝的物流跟踪页小问题

问题描述

问 题

我想做一个邮件跟踪的页面。类似淘宝的物流跟踪

问题：跟踪页面里所有日期一致的条目，只显示一条日期信息，html结构如下

<div class="track-details">
                    <ul class="track-list">
                        <li>
                            <span class="date">2016-06-06</span>
                            <span class="week">周六</span>
                            <span class="time">11:45:23</span>
                            <span class="text">你的订单待配货</span>
                        </li>
                        <li>
                            <span class="date hide">2016-06-06</span>
                            <span class="week hide">周六</span>
                            <span class="time">11:45:23</span>
                            <span class="text">您的包裹已出库</span>
                        </li>
                        <li>
                            <span class="date hide">2016-06-06</span>
                            <span class="week hide">周六</span>
                            <span class="time">11:45:23</span>
                            <span class="text">你的订单待配货</span>
                        </li>
                        <li>
                            <span class="date hide">2016-06-06</span>
                            <span class="week hide">周六</span>
                            <span class="time">11:45:23</span>
                            <span class="text">【重庆市】申通快递 重庆市公司收件员 已揽件</span>
                        </li>
                        <li>
                            <span class="date">2016-06-01</span>
                            <span class="week">周一</span>
                            <span class="time">11:45:23</span>
                            <span class="text">【重庆市】重庆转运中心 已发出</span>
                        </li>
                        <li>
                            <span class="date hide">2016-06-01</span>
                            <span class="week hide">周一</span>
                            <span class="time">11:45:23</span>
                            <span class="text">【重庆市】快件已到达 重庆转运中心</span>
                        </li>
                        <li>
                            <span class="date hide">2016-06-01</span>
                            <span class="week hide">周一</span>
                            <span class="time">11:45:23</span>
                            <span class="text">到达目的地网点重庆渝中区杨家坪公司石坪桥分部</span>
                        </li>

我猜想的原理是判断同一个日期然后为同一个日期除第一条外剩下的都添加一个hide的class，，想了很久没有思路。

解决方案

var last;
$('.track-list li').each(function(){
  var $this = $(this);
  var $date = $this.find('.date');
  var $week = $this.find('.week');
  var date = $date.text();
  if (last == date) {
    $date.addClass('hide');
    $week.addClass('hide');
  }
  last = date;
})

这篇关于javascript - 一个关于淘宝的物流跟踪页小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！