Question

我正在尝试从日期列表中找到今天的下一个/最近的日期，然后为其添加一个类并在另一个地方显示该项目。

<ul class="locations">
    <li>
        <span class="date">01-Jun-2015</span> 
        <span class="location">London</span>
    </li>
    <li>
        <span class="date">15-Jun-2015</span> 
        <span class="location">Paris</span>
    </li>
    <li>
        <span class="date">03-Jul-2015</span> 
        <span class="location">Berlin</span>
    </li>
    <li>
        <span class="date">16-Jun-2015</span> 
        <span class="location">Milan</span>
    </li>
    <li>
        <span class="date">20-Jul-2015</span> 
        <span class="location">Madrid</span>
    </li>
    <li>
        <span class="date">07-Aug-2015</span> 
        <span class="location">Lisbon</span>
    </li>
</ul>
<p class="next-date">
    Next date and location: 
</p>

请有人帮我指点正确的方向吗？

Answer 1

我写了一个自定义排序函数来对壁橱下一个日期进行排序

  dates.sort(function(x, y) { 
    if (x[0]-Date.now() < 0) {
      return 1;
    }
    if (x[0]-Date.now() < y[0]-Date.now()) {
      return -1;
    }
    if (x[0]-Date.now() > y[0]-Date.now()) {
      return 1;
    }
    return 0;
  });

http://codepen.io/anon/pen/Kpqvxv

Answer 2

尝试使用Date()进行比较：

$(function() {
  var now = new Date().getTime(); //get current time
  var li, diff, sp, tmp;
  $('span.date').each(function() {//loop in all dates
    sp = $(this);
    if (!li) {// first time
      li = sp.closest('li'); // get parent of date
      diff = Math.abs(now - new Date(sp.text()).getTime()); //get differnce
      return;
    }
    tmp = Math.abs(now - new Date(sp.text()).getTime());
    if (tmp < diff) { // this is close to current date
      diff = tmp;
      li = sp.closest('li'); 
    }
  });
  li.addClass('now'); // highlight
  $('p.next-date').text(function() {
	return this.innerHTML + li.text(); // update date and place
  });
});

.now {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="locations">
  <li>
    <span class="date">01-Jun-2015</span> 
    <span class="location">London</span>
  </li>
  <li>
    <span class="date">15-Jun-2015</span> 
    <span class="location">Paris</span>
  </li>
  <li>
    <span class="date">03-Jul-2015</span> 
    <span class="location">Berlin</span>
  </li>
  <li>
    <span class="date">16-Jun-2015</span> 
    <span class="location">Milan</span>
  </li>
  <li>
    <span class="date">20-Jul-2015</span> 
    <span class="location">Madrid</span>
  </li>
  <li>
    <span class="date">07-Aug-2015</span> 
    <span class="location">Lisbon</span>
  </li>
</ul>
<p class="next-date">
    Next date and location: 
</p>

Answer 3

我认为您对jQuery没问题，因为您的问题已被标记。您可以使用一些内置函数找到最近的未来日期，例如Date()，Array.sort()和$.map()，如下所示。请查看脚本中的注释以获取有关代码的更多信息。

var $locations = $(".locations");

//Today's date in milliseconds
var tsToday = new Date().getTime();

//Create an array of timestamps using .map
var allDatesTimestamp = $locations.find(".date").map(function() {
    //Convert text to date in milliseconds
    var ts = new Date($(this).text()).getTime();
    //Return only those timestamps that are greater than today
    //And sort them to get the smallest/nearest timestamp as the first array item
    if (ts > tsToday) {
        return ts;
    }
}).get().sort();

//Find all .date elements and filter out
var $elem = $locations.find(".date").filter(function() {
    //Filter out the one where date equals to first item in the array as that's the nearest
    return new Date($(this).text()).getTime() === allDatesTimestamp[0]
    //Return the sarrounding element
    //Add a class if need be, to highlight it
}).closest("li").addClass("nearest");

//Rest is simple; find and display.
$(".next-date")
.append("Date: " + $elem.find(".date").text())
.append("<br/>Location: " + $elem.find(".location").text());

.locations .nearest {
    color: green;
    font-size: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="locations">
    <li>
        <span class="date">01-Jun-2015</span> 
        <span class="location">London</span>
    </li>
    <li>
        <span class="date">15-Jun-2015</span> 
        <span class="location">Paris</span>
    </li>
    <li>
        <span class="date">03-Jul-2015</span> 
        <span class="location">Berlin</span>
    </li>
    <li>
        <span class="date">16-Jun-2015</span> 
        <span class="location">Milan</span>
    </li>
    <li>
        <span class="date">20-Jul-2015</span> 
        <span class="location">Madrid</span>
    </li>
    <li>
        <span class="date">07-Aug-2015</span> 
        <span class="location">Lisbon</span>
    </li>
</ul>
<p class="next-date">
    <strong>Next date and location: </strong><br/>
</p>

希望有所帮助。

试图在<ul>中找到最近的日期

3 个答案: