jQuery前段时间

Question

我在如何更新我的网站的帖子中的会议记录上遇到了一些麻烦。

所以说我有这个：

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

我在试着更新跨度内的记录。我遇到的问题是，只有一个跨空间得到更新，而另一个没有更新。

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

我还阅读了jquery的.each()方法，但我不确定如何在这个场景中实现它，以及它是否是一个可行的解决方案。使用.each()时尝试过的代码

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

任何帮助都是非常感谢的！谢谢。

Answer 1

主要问题不是在this中引用each。将选择器更改为$(this)将修复它。

注意：您不需要each，因为html()可以接受一个函数，该函数可以为每个元素返回一个字符串：

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/

注意:间隔经过的时间是不可靠的，所以您最好在呈现页面时记录“立即”，并显示从该时间开始的经过的秒。

Answer 2

在您的.each中，您需要对该特定元素执行更新。您现在只是将通用选择器代码放入其中，但是如果您使用$(this)而不是$('.updateMinutes')，您将更加接近您想要的结果。也就是说。

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

请注意，setInterval并不保证确切地在经过的间隔内触发，因此随着时间的推移，您可能会在计数器上得到一些漂移。

Answer 3

正如注释中所指出的，以下代码在jsfiddle上运行良好：

HTML：

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

联署材料：

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

(为演示目的在第二间隔设置)

小提琴在这里：http://jsfiddle.net/e5och57u/

在你最初的帖子中，min是一个错误，应该是分钟，否则它就能正常工作了。