2

我有一个职位发布列表，并希望在日期等于今天的日期时显示一个显示“新”的 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;
    });
4

4 回答 4

2

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

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

你在类 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
    }
});
于 2013-02-07T19:14:43.027 回答
1

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

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

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

于 2013-02-07T19:13:15.857 回答
1

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

$(".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 中，这又不是你想要的。

于 2013-02-07T19:26:03.723 回答
1

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

$(".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()将每个匹配的元素推进到下一个兄弟元素（带有 class 的隐藏 div new），并show()显示它。
于 2013-02-07T19:33:56.700 回答