Home  >  Q&A  >  body text

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

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

问题:跟踪页面里所有日期一致的条目,只显示一条日期信息,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,,想了很久没有思路。

大家讲道理大家讲道理2770 days ago634

reply all(2)I'll reply

  • 黄舟

    黄舟2017-04-11 12:06:27

    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;
    })

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-11 12:06:27

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

    {
        "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":"达目的地网点重庆渝中区杨家坪公司石坪桥分部"
                    }
                ]
            }
        ]
    }

    现在有思路了么

    reply
    0
  • Cancelreply