javascript - 一个关于淘宝的物流跟踪页小问题
大家讲道理
大家讲道理 2017-04-11 12:04:27
0
2
642

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

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

<p 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,,想了很久没有思路。

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

reply all(2)
黄舟
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;
})
Peter_Zhu

如果数据结构合理的话就很简单了

{
    "package-status": [
        {
            "date":"2016-06-06",
            "week":"周六",
            "detail": [
                {
                "time":"11:45:23",
                "text":"你的订单待配货"
                },
                {
                "time":"11:45:23",
                "text":"您的包裹已出库"
                }
            ]
        },
        {
            "date":"2016-06-01",
            "week":"周一",
            "detail": [
                {
                "time":"11:45:23",
                "text":"达目的地网点重庆渝中区杨家坪公司石坪桥分部"
                }
            ]
        }
    ]
}

现在有思路了么

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template