Question

我有一个由wordpress中的foreach循环生成的事件列表，在每个列表项中，我有一个日期，一个值和一个新日期，这是对这两个项目的计算。

使用Jquery如果没有多个此计算实例，我可以计算出这个计算但是我正在寻找适应每个li的工作。以下是我目前的HTML;

<ul class="event-list">


<li class="event">
<div class="date">13 jun 2017</div>
<div class="value">2</div>
<div class="new-date"> in here </div> 
</li>


<li class="event">
<div class="date">15 jun 2017</div>
<div class="value">3</div>
<div class="new-date"> in here </div> 
</li>

</ul>

我希望使用jquery实现的目标并牢记这些div中的所有值都是动态生成的，如下所示：

<li class="event">
<div class="date">13 jun 2017</div>
<div class="value">2</div>
<div class="new-date"> 15 jun 2017 </div> 
</li>


<li class="event">
<div class="date">15 jun 2017</div>
<div class="value">3</div>
<div class="new-date"> 18 jun 2017 </div> 
</li>

</ul>

这是展示正在进行的工作的小提琴https://jsfiddle.net/uo2gugda/

您可以看到计算适用于第一个事件而不是第二个事件，我面临的另一个问题是新日期的输出 - 我如何格式化为2017年6月15日而不是2017年6月15日星期四00 00 ：00：00 GMT + 0100（BST）。

感谢。

Answer 1

你需要一个for each dom元素，格式化你可以使用moment.js，在这个循环计算第二天如下：

＆＃13;

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}

$('li.event').each(function() {
  var $this = $(this);
  var date = $this.children('.date').html();
  var days = Number($this.children('.value').html());
  var stringDate = moment(addDays(date, days)).format('DD MMM YYYY');
  $this.children('.new-date').html(stringDate);
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="event-list">
  <li class="event">
    <div class="date">13 jun 2017</div>
    <div class="value">2</div>
    <div class="new-date"> in here </div> 
  </li>
  <br>
  <li class="event">
    <div class="date">15 jun 2017</div>
    <div class="value">3</div>
    <div class="new-date"> in here </div> 
  </li> 
 </ul>

＆＃13;

计算foreach循环中的日期

1 个答案: