Question

我正在尝试获取依赖于html中的time属性显示的链接这可能吗？或者有更好的方法。我理解使用此客户端的局限性（但对用户来说应该不是问题） HTML

＆＃13;

var now = new Date();

if(now > datetime) // today is after linkdate
{
     $('.datelink').show();
}

＆＃13;

body {
  color:red;
}

.datelink{
    display:none;
}

＆＃13;

  <li>WHITBY  <time datetime="2015-11-1">November 1st 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>EASINGWOLD  <time datetime="2015-11-2">November 2nd 10.34</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>DARLINGTON  <time datetime="2015-11-15">November 15th 9.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>RIPON CITY  <time datetime="2015-11-16">November 16th 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>ROMANBY  <time datetime="2015-11-20">November 20th 13.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>KIRKBYMOORSIDE <time datetime="2015-11-21">November 21st</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>BEDALE  <time datetime="2015-11-22">November 22nd 8.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li>
    <li>CATTERICK  <time datetime="2015-11-23">November 23rd 9.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li>

＆＃13;

是否可以获得＆＃39; datetime＆＃39;从html到jquery中的if语句？

Answer 1

您可以使用以下代码：

if

//store the current datetime in a global variable
var now = new Date();

//iterate through each time element
$("ul li time").each(function() {
  //get the date of each one from datetime attribute
  var dateTime = Date.parse($(this).attr("datetime"));
  //compare with the current datetime as in OP
  if (now > dateTime) // today is after linkdate
  {
    //shows the elements that match the above condition
    $(this).next('a.datelink').show();
  }
});

body {
  color: red;
}
.datelink {
  display: none;
}

<强>参考

Date.parse()

.next()

.each()

Answer 2

我也想提供一个免费的JQuery选项： - ）

<强>代码：

var now = new Date(),
    dateTimeSelector = document.querySelectorAll('time'),
    dateLinkSelector = document.querySelectorAll('.datelink'),
    i;

for (i = 0; i < dateTimeSelector.length; ++i) {
    dateTime = Date.parse(dateTimeSelector[i].getAttribute('datetime'));
    console.log(dateTime + now);
    if (now > dateTime) {
        dateLinkSelector[i].style.display = "inline";
    }
}

链接：

http://jsfiddle.net/link2twenty/0uu7z98h/3/

Answer 3

亚历克斯的答案很好。我将添加一个可选的，它可能更容易使用 - 取决于HTML的结构，因为它更直接地在链接标签本身上运行。首先，向链接添加数据属性（例如data-datetime），指定每个链接的日期：

<a href="bbc.co.uk" class="datelink" data-datetime="2015-11-1"> SOME LINK </a>

完整示例HTML将是这样的（长行=很难在SO上阅读）：

<li>WHITBY  <time datetime="2015-11-1">November 1st 11.00</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-1"> SOME LINK </a>  </li>
<li>EASINGWOLD  <time datetime="2015-11-2">November 2nd 10.34</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-2"> SOME LINK </a>  </li>
<li>DARLINGTON  <time datetime="2015-11-15">November 15th 9.30</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-15"> SOME LINK </a>  </li>
<li>RIPON CITY  <time datetime="2015-11-16">November 16th 11.00</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-16"> SOME LINK </a>  </li>
<li>ROMANBY  <time datetime="2015-11-20">November 20th 13.00</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-20"> SOME LINK </a>  </li>
<li>KIRKBYMOORSIDE <time datetime="2015-11-21">November 21st</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-21"> SOME LINK </a>  </li>
<li>BEDALE  <time datetime="2015-11-22">November 22nd 8.30</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-22"> SOME LINK </a> </li>
<li>CATTERICK  <time datetime="2015-11-23">November 23rd 9.00</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-23"> SOME

然后在$（document）.ready或类似的地方运行类似的东西：

var now = new Date();
$('.datelink').each(function ()
{
    var $link = $(this);
    if (now > Date.parse($link.data('datetime'))) {
        $link.show();
    } else {
        $link.hide();
    }
})

Jquery / javascript使用html日期显示链接

3 个答案: