2

求人情報のリストがあり、日付が今日の日付と等しい場合に「新規」と表示される div を表示したいと考えています。

これを作成するために、外側の div のセットごとにループで実行される JavaScript コードを作成しましたが、.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

このコードは、あなたが望むことをしているようです:

$(".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

ここに 2 つの問題があります。まず、日付が一致するかどうかに関係なく、 show() をトリガーしています。

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

2 番目の問題は、特定の div のみを表示したい場合に、クラス「new」ですべてを表示していることです。「新しい」div ごとに一意の ID を指定し、その特定の ID を持つ div のみを表示するようにコードを修正する必要があります。

于 2013-02-07T19:13:15.857 に答える
1

複雑なイテレータ関数は必要ありません。あなたに必要なのは：

$(".outer .job-date" ).filter(function() {
   return (Date.parse($(this).text()) / 86400000 | 0) == (new Date() / 86400000 | 0);
}).next().show();
  • filterよりも、あなたがやっていることのためのより良い選択のようですeach. まず、日付が今日と等しい要素のセットが必要です。
  • そのために、日付を取り、時間の部分を取り除くことができます。日付は、エポックからのミリ秒数で表されます。1 日のミリ秒数 (86400000、または 60*60*24*1000) で割り、小数部分を切り捨てる (javascript idiom: |0) ことで、エポックからの完全な日数を比較しています。
  • 今日の日付を含む一連の要素を使用して、next()一致したすべての要素を次の兄弟 ( class を持つ非表示の div new) に進め、それをshow()表示します。
于 2013-02-07T19:33:56.700 に答える