Moment.js mise en forme du texte et classes

Question

Première publication. Donc, je dois formater un texte dans un élément qui ressemble à ceci

<div class="entry-time"> 
    2012-05-30T20:11:06+00:00 
</div> 

Je suis en train de formater ceci à quelque chose de plus lisible avec moment.js. Je ne peux le faire depuis le début avec javascript. J'ai écrit une fonction qui ressemble à ceci.

$(document).ready(function() { 
    function formatDate(date) { 
     formattedDate = date.text(); 
     var d = moment(formattedDate, "YYYY-MM-DDTHH:mm:ss"); 
     $(date).html(d.format("dddd, MMMM Do YYYY, h:mm:ss a")); 
    }; 

    formatDate($('.entry-date')); 
}); 

Ceci fonctionne s'il y a un élément mais quand il y a plusieurs éléments, il formatera tout en une seule date. Je sais que cela a quelque chose à voir avec jQuery tirant dans un tableau d'éléments mais je n'ai aucune idée de comment faire ce que j'ai fait à chaque élément avec la classe d'entrée-date.

Quelqu'un peut-il aider? Merci d'avance.

Answer 1

Au cœur de ce qui est mauvais est que la méthode .text() jQuery obtient « le contenu du texte combiné de chaque élément dans l'ensemble des éléments adaptés, y compris leurs descendants » (api.jquery.com/text) plutôt que d'itérer sur l'ensemble des éléments comme vous le souhaitez.

Quelque chose comme cela devrait fonctionner, en passant une fonction dans la méthode setter .html() jQuery:

$(".entry-date").html(function(index, value) { 
    return moment(value, "YYYY-MM-DDTHH:mm:ss").format("dddd, MMMM Do YYYY, h:mm:ss a"); 
}); 

Answer 2

Vous devrez parcourir chaque match en utilisant la méthode de .each de jquery:

$(date).each(function(){ Format date here }); 

Et cela va dans votre formatDate fonction maintenant existante. En fonction de votre code actuel

Answer 3

vous pouvez modifier votre fonction formatDate comme celui-ci

$(document).ready(function() { 
    function formatDate(date) { 
     date.each(function(){ 
     var formattedDate = $(this).text(); 
     var d = moment(formattedDate, "YYYY-MM-DDTHH:mm:ss"); 
     $(this).html(d.format("dddd, MMMM Do YYYY, h:mm:ss a")); 

     }); 
    }; 

formatDate($('.entry-time')); 
}); 

Et vous nom de classe réelle est entry-time mais vous appellent comme formatDate($('.entry-date')); qui n'obtiendra rien que la classe entry-date n'existe pas.

Working Fiddle

Answer 4

Vous devez utiliser chaque parce que votre sélecteur est une classe (depuis que vous avez utilisé.) qui peut être utilisé avec plusieurs DOM est comme peut well..so être votre chose jquery renvoie un tableau qui doit être traversé en utilisant chaque.

$('.entry-date').each(function(){ 
    formatDate($(this).val());//if it is a text box 
}); 

OU

$('.entry-date').each(function(){ 
    formatDate($(this).text());//if it is a label 
}); 

Answer 5

Vous voulez faire une boucle à travers les éléments transmis à la fonction. Cela pourrait être fait avec un $ .each() dans jQuery. Voici un exemple rapide:

http://jsfiddle.net/n1ck/QQYq2/1/

$(function(){ 
    function formatDate(dates) { 
     dates.each(function(){ 
      //get date 
      formattedDate = $(this).text(); 

      //format it 
      var d = moment(formattedDate, "YYYY-MM-DDTHH:mm:ss"); 

      //replace it 
      $(this).html(d.format("dddd, MMMM Do YYYY, h:mm:ss a")); 
     }); 
    }; 

formatDate($('.entry-time')); 
}); 
​