JavaScript jQuery Time Ago jquery timer,jquery timepicker,jquery settimeout,jquery timeline,jquery timer

I'm having a bit a trouble on how to update the minutes in a post for my website.

So say I have this:

<small>posted <span class="updateMinutes">20 minutes </span> ago</small>
<small>posted <span class="updateMinutes">33 minutes </span> ago</small>

I'm trying to update the minutes inside the span. The problem I'm having is that only one of the spans get updated while the other one doesn't. My jquery code is the following:

setInterval(function(){
            var minute = $('.updateMinutes').text().match(/\d+/);
            $('.updateMinutes').html((parseInt(minute[0]) + 1).toString() + ' minutes');
 }, 60000);

I was also reading up on the .each() method jquery has but I'm not sure how I would to implement it in this scenario and if it would be a viable solution. Code I tried when using .each():

setInterval(function(){
        $('.updateMinutes').each(function(){
            var minute = $('.updateMinutes').text().match(/\d+/);
            $('.updateMinutes').html((parseInt(minute[0]) + 1).toString() + ' minutes');
        });
 }, 60000);

Any help is greatly appreciated! Thanks.

The main problem is not referencing this inside your each. Changing the selectors to $(this) will fix it.

Note: You do not need an each as html() can take a function that returns a string for each element:

setInterval(function () {
    $('.updateMinutes').html(function () {
        var minute = $(this).text().match(/\d+/);
        return (parseInt(minute[0]) + 1).toString() + ' minutes';
    });
}, 60000);

JSFIddle: http://jsfiddle.net/TrueBlueAussie/u707zkxo/1/

Note: elapsed time from intervals is unreliable, so you are better of recording "now" when the page is rendered, and display the elapsed seconds from that time.

In your .each you need to perform the update on that specific element. You are just putting your general selector code in it now, but if you use $(this) instead of $('.updateMinutes') you'll get closer to what you want. I.e.

setInterval(function(){
        $('.updateMinutes').each(function(){
            var $currentEl = $(this);
            var minute = $currentEl.text().match(/\d+/);
            $currentEl.html((parseInt(minute[0]) + 1).toString() + ' minutes');
        });
 }, 60000);

Be aware that setInterval is not guaranteed to fire exactly at the passed in interval, so you may get some drift on your counters over time.

I just edited your code so it's working:

$(document).ready(function() {
 function updateMins() {
    $('.updateMinutes').each(function () {
         var minute = $(this).text().match(/\d+/);
         $(this).html((parseInt(minute[0]) + 1).toString() + ' minutes');
    });
 }

 setInterval(updateMins, 60000);
});

As noted in the comments the following code works fine on jsfiddle:

HTML:

<small>posted <span class="updateMinutes">33 seconds</span> ago</small>
<small>posted <span class="updateMinutes">33 seconds</span> ago</small>

JS:

setInterval(function(){
        $('.updateMinutes').each(function(){
            var minute = $(this).text().match(/\d+/);
            $(this).html((parseInt(minute[0]) + 1).toString() + ' minutes');
        });
 }, 1000);

(Set on second interval for demo purposes)

Fiddle is here: http://jsfiddle.net/e5och57u/

In your original post min[0] was an error, should have been minute[0], otherwise it works fine