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
I have created a Background Job in Parse Cloud Code that sends out email notifications based on a date in one of my Parse classes. Here is the idea: Query the class that contains the date. Iterate ...
I have created a Background Job in Parse Cloud Code that sends out email notifications based on a date in one of my Parse classes. Here is the idea: Query the class that contains the date. Iterate ...
I am using a jQuery plugin which converts a normal select dropdown into a fancy multi select dropdown. Here's the plugin url: http://wenzhixin.net.cn/p/multiple-select/ Now, the problem which i am ...
I am using a jQuery plugin which converts a normal select dropdown into a fancy multi select dropdown. Here's the plugin url: http://wenzhixin.net.cn/p/multiple-select/ Now, the problem which i am ...
I've been playing around with HTML5 and Javascript a lot lately and have been really impressed with the functionality of LocalStorage as well as SessionStorage. It got me to thinking - with the advent ...
I've been playing around with HTML5 and Javascript a lot lately and have been really impressed with the functionality of LocalStorage as well as SessionStorage. It got me to thinking - with the advent ...
I've created a 3D cube, that rotates clockwise and anti-clockwise on the Y-axis when the left and right keys are pressed, and then rotates on the X-axis when the up key is pressed. My issue is, that ...
I've created a 3D cube, that rotates clockwise and anti-clockwise on the Y-axis when the left and right keys are pressed, and then rotates on the X-axis when the up key is pressed. My issue is, that ...