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

我想要获得链接显示依赖于HTML中的时间属性是可能的吗？或者有更好的方法来做到这一点。我了解使用此客户端的限制（但它不应该是用户的一个问题） HTMLjquery/javascript显示链接使用html日期

var now = new Date(); 
 

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

body { 
 
    color:red; 
 
} 
 

 
.datelink{ 
 
    display:none; 
 
}

<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>

是有可能得到从HTML到了“日期时间”如果语句在jQuery中？

来源

2015-11-20 Greyhounddad

您可以使用下面的代码：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <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> 
 
</ul>

参考

2015-11-20 14:13:14

Alex的回答很好。我将添加一个可选项，这取决于HTML的结构 - 可能更易于使用，因为它更直接地在链接标记本身上运行。首先，一个数据属性（例如数据的日期时间）添加到链接，指定日期为每个链接：

<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

然后运行这样的事情在$（文件）。就绪或类似：

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

来源

2015-11-20 14:29:21 Culme

我想给一个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/

来源

2015-11-20 14:38:04

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

回答

相关问题