Afficher la division lorsque les dates correspondent à l'aide de .Each

Question

J'ai une liste d'offres d'emploi et j'aimerais afficher une div qui dit 'New' quand la date est égale à la date d'aujourd'hui.

Pour ce faire, j'ai créé un code javascript qui s'exécute en boucle pour chaque ensemble de div externes, mais j'ai du mal à exécuter correctement la fonction .each.

Voici le lien vers une JSFiddle : http://jsfiddle.net/jeremyccrane/2p9f7/

Voici le code 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>

Voici le code 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

Je ne sais pas trop quel est le problème selon vous, mais j'en vois plusieurs. Principalement, lorsque vous faites par exemple

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

vous appelez show() sur TOUS les éléments correspondants de la classe new, et pas seulement sur celui qui se trouve "sous" l'élément extérieur dans lequel vous êtes. Essayez ceci :

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

Vous avez mis en place le nouveau pour montrer quel que soit le sens de votre comparaison de date. Je me suis efforcé de mettre à jour votre fichier ci-dessous :

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

Vous avez deux problèmes. Tout d'abord, vous déclenchez show() indépendamment du fait que les dates correspondent ou non :

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

Le deuxième problème est que vous affichez tout ce qui a la classe "new", alors que vous ne voulez afficher que certaines divs. Vous devrez donner des identifiants uniques à chaque div "new", puis corriger votre code pour n'afficher que les divs ayant cet identifiant particulier.

Answer 3

Ce code semble faire ce que vous voulez :

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

Votre principal problème était qu'il vous manquait tous les $(this).find() appels. Vous itérez à travers les conteneurs. L'utilisation de $(this).find() vous permettra d'obtenir les contrôles à l'intérieur de ces conteneurs. Les contrôles $() calls trouvera tous les éléments correspondants dans le document, ce qui n'est pas ce que vous souhaitez.

En this Dans ce cas, il s'agit du conteneur. Le fait de l'envelopper dans la fonction jQuery nous permet d'utiliser la méthode de recherche jQuery pour obtenir les enfants du conteneur.

De plus, comme les autres l'ont mentionné, vous étiez show() Le fait de ne pas avoir à se préoccuper de la div, indépendamment du succès ou de l'échec, n'est pas non plus ce que vous souhaitez.

Answer 4

Vous n'avez pas besoin d'une fonction itérateur compliquée. Tout ce dont vous avez besoin est :

$(".outer .job-date" ).filter(function() {
   return (Date.parse($(this).text()) / 86400000 | 0) == (new Date() / 86400000 | 0);
}).next().show();

• filter semble être un meilleur choix pour ce que vous faites que each . Tout d'abord, nous voulons simplement obtenir l'ensemble des éléments dont la date est égale à aujourd'hui.
• Pour ce faire, nous pouvons prendre les dates et nous débarrasser de la partie temporelle. Les dates sont représentées en termes de nombre de millisecondes depuis l'époque. En divisant par le nombre de millisecondes dans un jour (86400000, ou 60*60*24*1000) et en tronquant la partie décimale (idiome javascript : |0 ), nous comparons le nombre de jours entiers depuis l'époque.
• Maintenant avec un ensemble d'éléments contenant la date du jour, next() avance chaque élément correspondant au frère suivant (la div cachée avec la classe new ), et show() le montre.