显示潜水日期匹配使用.每个

Show Div When Dates Match Using .Each

本文关键字：每个 潜水 日期 显示      更新时间：2023-09-26

我有一个招聘信息列表，当日期等于今天的日期时，我想显示一个div，上面写着"New"。

为了创建这个，我创建了一个javascript代码，它将在每个外部div的循环中执行，但我在正确运行.each函数时遇到了问题。

以下是指向JSFiddle的链接：http://jsfiddle.net/jeremyccrane/2p9f7/

这是HTML代码：

<div class="outer">
    <div class="job-date">07-Feb-13</div>
    <div class="new" style="display:none;">NEW</div>
    <div class="value"></div>
</div>
<div class="outer">
    <div class="job-date">12-Feb-13</div>
    <div class="new" style="display:none;">NEW</div>
    <div class="value"></div>
</div>

这是Javascript代码：

$( ".outer" ).each(function(i) {
        var jd = $(".job-date").text();
        j = jd.substr(0,2);
        var today = new Date();
        var dd = ( '0' + (today.getDate()) ).slice( -2 )
        $('.value').html(dd + "/" + j);    
        if(dd === j) {
            $('.new').show();
        } else {
            $('.new').show();   
        }
        return false;
    });

不太确定你认为问题是什么，但我可以看到几个问题。主要是，当你做例如：

$('.new').show();

您正在对class new的所有匹配元素调用show（），而不仅仅是您所在的外层下的元素。试试这个：

$('.new', this).show();

你设置了新的，以显示你的日期比较结果。我试过在下面更新你的小提琴：

$( ".outer" ).each(function(i) {
    var jd = $(".job-date", this).text();
    j = jd.substr(0,2);
    var today = new Date();
    var dd = ( '0' + (today.getDate()) ).slice( -2 )
    $('.value', this).html(dd + "/" + j);    
    if(dd === j) {
        $('.new', this).show();
    } else {
       // $('.new', this).show();   
       // do something different here
    }
});

此代码似乎可以执行您想要的操作：

$(".outer").each(function(i) {
    var jd = $(this).find(".job-date").text();
    var j = jd.substr(0,2);
    var today = new Date();
    var dd = ('0' + (today.getDate())).slice(-2);
    $(this).find('.value').html(dd + "/" + j);    
    if(dd == j) {
        $(this).find('.new').show();
    } else {
        $(this).find('.new').hide();   
    }
    return false;
});

http://jsfiddle.net/Dk4dQ/

您的主要问题是错过了所有的$(this).find()调用。您正在遍历容器。使用$(this).find()将获得这些容器中的控件。普通的$()调用将在文档中找到所有匹配的元素，这不是您想要的。

在这种情况下，this指的是容器。将它封装在jQuery函数中，可以使用jQueryfind方法来获取它的子级。

此外，正如其他人所提到的，无论成功或失败，您都是show()，这同样不是您想要的。

这里有两个问题。首先，无论日期是否匹配，您都会触发show（）：

    if(dd === j) {
        $('.new').show();
    } else {
        $('.new').show();   // <-- shouldn't show in this case
    }

第二个问题是，当您只想显示特定的div时，您使用类"new"显示所有内容。您需要为每个"新"div提供唯一的ID，然后修复代码，使其仅显示具有该特定ID的div。

您不需要复杂的迭代器函数。你只需要：

$(".outer .job-date" ).filter(function() {
   return (Date.parse($(this).text()) / 86400000 | 0) == (new Date() / 86400000 | 0);
}).next().show();
  • filter似乎是比each更好的选择。首先，我们只想要一组日期等于今天的元素
  • 要做到这一点，我们可以选择日期，去掉时间部分。日期以自纪元以来的毫秒数表示。通过除以一天中的毫秒数（86400000，或60*60*24*1000），然后截断任何小数部分（javascript习语：|0），我们可以比较自epoch以来的完整天数
  • 现在，有了一组包含今天日期的元素，next()将每个匹配的元素推进到下一个同级（类为new的隐藏div），show()显示了它
相关文章：