通过jquery将时间（HH：MM）添加到<li>标签答案

【问题标题】：Adding time (HH:MM) to <li> tags through jquery通过jquery将时间（HH：MM）添加到<li>标签
【发布时间】：2012-12-07 02:35:44
【问题描述】：

您好，如何根据预定义的开始时间向 li 标签添加 HH:MM 时间？

背景：我有一个舞蹈调度程序，它在无序列表中列出舞蹈条目。通过 jQuery UI，用户可以重新安排舞蹈套路，完成后，他们可以在一天的舞蹈日程中显示每个套路的时间安排。每个舞蹈程序的长度为 3、6 或 30 分钟，我将此长度存储在 li 标签的属性中（我知道不正确）。一天的开始时间是上午 8:00:00，我想根据每个例程的长度、之前的舞蹈例程和一天的开始时间来为每个例程添加时间。

这是我的循环中的 PHP li 代码示例，它打印出所有条目。我想将例程的时间存储在 span id='etimeXXX' 中。例如，我的循环中的以下代码：

<ul id="sortable2">
...

$step2 .= "<li id='e".$e[entry_id]."' class='cat entry' lang='$length'>\n"
. "<span class='entry_time' id='etime".$e[entry_id]."'></span>"
. strtoupper($performance_title)]
. "</li>\n";

...
</ul>

...会输出类似：

8:03:00 AM 一闪一闪

上午 8:06:00 天上的馅饼

上午 8:09:00 挑战

我正在尝试使用类似以下的方法来显示时间，但它不起作用：

function createDanceTimes() {   
    var start_time = new Date("March 1, 2013 08:00:00");

    var h = start_time.getHours();
    var m = start_time.getMinutes();

    var entry_length = 0;
    var cur_time = m;

    $("#sortable2 li[id]").each(function(index) {           
        entry_length = $(this).children('span[id^="etime"]').attr('lang');

        m=m+entry_length;

        $(this).children('span[id^="etime"]').text(m);
    });
}

任何帮助将不胜感激！

【问题讨论】：

您可以使用 HTML5 data- 属性，例如 data-time，只是为了保持整洁。

标签： php jquery time

【解决方案1】：

使用data-* 属性（HTML5 天赐良机），它可以让它更简单：

<ul id="sortable2">
//...
<?php
$performance_title = strtoupper($performance_title);
$step2 .= <<<HTML
  <li data-time='{$e['entry_id']}' data-length='{$length}' class='cat entry'>
    <span class='entry_time'></span>
    $performance_title
  </li>
HTML;
?>
//...
</ul>

function createDanceTimes() {   
  var start_time = new Date();

  start_time.setHour(8);
  start_time.setMinute(0);

  $("#sortable2 li[data-time]").each(function(index) {           
    var 
      $this = $this;

    start_time.setMinute(start_time.getMinute() + parseInt($this.data('length'), 10));

    $(this).find('span.entry_time').text((start_time.getHour()) + ':' + (start_time.getMinute())); // this will deal with minutes that get past 60, and will convert to a new hour automatically
  });
}

由于我不知道您当前使用的格式是什么，所以我只是在尽力猜测

【讨论】：

非常感谢！我最终使用了结合 datejs 库 link 的变体。