![](/img/trans.png)
[英]How to find elements with value and set a class in this closest <tr> in jquery?
[英]Find closest date in elements then add class
例如:今天是4月12日
2012年12月
2012年12月
2012年12月
標題(2012年12月5日)
標題(2012年12月7日)
最近的日期是5月12日(不是12月)(更新不是更老)
如果超過一個“十二月五日”那么只增加班級的第一個孩子
HTML:
<div class="wrap">
<div class="zone" id="one">
<div class="box">
<footer class="time">1. December 2012</footer>
</div>
<div class="box">
<footer class="time">1. December 2012</footer>
</div>
<div class="box">
<footer class="time">3. December 2012</footer>
</div>
<div class="box">
<h2>Title <span class="time">(5. December 2012)</span></h2>
</div>
<div class="box">
<h2>Title <span class="time">(7. December 2012)</span></h2>
</div>
<div class="box">
<footer class="time">9. December 2012</footer>
</div>
</div>
<div class="zone" id="two">
<!-- Same .zone#one but i will focus for .zone#one only-->
</div>
</div>
<code></code>
jQuery:
var closest = [];
$('.wrap > .zone:eq(0) .box').each(function(i) {
var date = $(this).find(".time").html().replace("(","").split(".");
closest.push(date[0]);
});
$("code").html(closest+"");
游樂場: http : //jsfiddle.net/WJvZb/
我現在來到這一步,但不知道找到最近的日期並添加類(例如.closest
類)
最簡單的方法是解析每個日期時間(取決於格式),將它們推入一個數組,然后循環數組計算它們之間的時間差,並拉出最小值。 您可以使用一些有用的庫(如moment.js)來進行日期解析和計算。
var now = new Date();
var closest = -1; //array ndx
var times = [];
var els = [];
$('.time').each(function(i) {
times.push(someParsingMethod($(this).text());
els.push($(this));
});
//initial difference
var diff = times[0].getTime() - now.getTime();
//check for lowest difference greater with a target date greater than now
for(var i=0;i<times.length;i++){
var tmpDiff = times[i].getTime() - now.getTime();
if(times[i].getTime() > now.getTime() && tmpDiff < diff){
closest = i;
}
}
if(closest != -1){
els[closest].addClass("closestClass");
}
它只是偽代碼,這項任務的真正挑戰是解析專有日期格式。
你應該用英語命名你的日期,因此“desember”...然后你可以迭代你的日期並從中創建Date對象,然后找到最接近的很容易。
var closest = [];
$('.wrap > .zone:eq(0) .box').each(function(i) {
var date = $(this).find(".time").html().replace("(","").replace(")","");
closest.push(new Date(date));
});
function closestTime(days, testDate)
{
var bestDiff = null;
for(i = 0; i < days.length; ++i){
currDiff = Math.abs(days[i] - testDate);
if(currDiff < bestDiff || bestDiff == null){
bestDate = days[i];
bestDiff = currDiff;
} else if (currDiff == bestDiff && days[i] > testDate) {
bestDiff = currDiff;
}
}
return bestDate;
}
console.log(closestTime(closest,new Date()));
只要您使用數組,這是實現它的最簡單方法。
var closest = [];
// Current Date
var current = new Date("04/12/2012");
// Function to get the Minimam value in Array
Array.min = function( array ){
return Math.min.apply( Math, array );
};
// Played on your code
$('.wrap > .zone:eq(0) .box').each(function(i) {
var date = $(this).find(".time").html().replace("(","").split(".");
// If higher than current date
if(current.getDay() < date[0]) {
closest.push(date[0]);
}
});
// Get the closest day..
$("code").html(Array.min(closest)+"");
在您的演示中播放: http : //jsfiddle.net/BerkerYuceer/WJvZb/40/
function findActive(days, testDate) {
var bestDiff = 0;
var bestDate = null;
var strDate = "No active";
for(i = 0; i < days.length; ++i){
var dDate = getDate(days[i]);
currDiff = Math.abs(dDate - testDate);
if(i ==0){
bestDiff = currDiff;
}
if(dDate <= testDate){
if(currDiff < bestDiff){
strDate = days[i];
bestDate = dDate;
bestDiff = currDiff;
}else if(currDiff == bestDiff){
strDate = days[i];
bestDate = dDate;
}
}
}
return strDate;
}
function getDate(strDate){
var day = strDate.substring(0,2);
var month = strDate.substring(3,5);
var year = strDate.substring(6,10);
return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
}
date mask is: dd.MM.yyyy
this code find active date.
enter code here
example
today is: 07.06.2013
dates is: 03.06.2013, 4.6.2013, 5.6.2013 => return 5.6.2013
dates is: 03.06.2013, 14.6.2013, 15.6.2013 => return 3.6.2013
dates is: 08.06.2013, 14.6.2013, 15.6.2013 => return null
dates is: 08.06.2013, 7.6.2013, 9.6.2013 => return 7.6.2013
etc
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.