Question

我有一份职位发布列表，并希望在日期等于今天的日期时显示一个说“新”的div。

为了创建这个，我创建了一个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;
    });

Answer 1

不太确定您认为问题是什么，但我可以看到一些问题。主要是，例如：

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

你在新类的所有匹配元素上调用show（），而不仅仅是你在外面的'under'之下。试试这个：

$('.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
    }
});

Answer 2

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

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

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

Answer 3

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

$(".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函数中让我们使用jQuery find方法来获取它的子项。

另外，正如其他人所提到的那样，无论成功与否，你都是show() div，这也不是你想要的。

Answer 4

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

$(".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），我们将比较自纪元以来的整天数。
现在有一组包含今天日期的元素，next()将每个匹配的元素推进到下一个兄弟（隐藏的div与类new），show()显示它。

使用.Each时日期匹配时显示Div

4 个答案: