Javascript 如何单独选择每个匹配选择器

我正在尝试使用jQuery创建一个脚本，它在其中查找类为“timeAgo”的元素，并将其innerHTML替换为create属性中的时间是多久以前。以下是我所拥有的：

function timeAgo(time) {
  var d = new Date();
  var diff = Math.floor((d.getTime() - time)/1000);
  if (diff >= 31536000) {
    if (Math.floor(diff/31536000) == 1) {
      return (Math.floor(diff/31536000) + " year ago");
    } else {
      return (Math.floor(diff/31536000) + " years ago");
    }
  } else if (diff >= 2592000) {
    if (Math.floor(diff/2592000) == 1) {
      return (Math.floor(diff/2592000) + " month ago");
    } else {
      return (Math.floor(diff/2592000) + " months ago");
    }
  } else if (diff >= 86400) {
    if (Math.floor(diff/86400) == 1) {
      return (Math.floor(diff/86400) + " day ago");
    } else {
      return (Math.floor(diff/86400) + " days ago");
    }
  } else if (diff >= 3600) {
    if (Math.floor(diff/3600) == 1) {
      return (Math.floor(diff/3600) + " hour ago");
    } else {
      return (Math.floor(diff/3600) + " hours ago");
    }
  } else if (diff >= 60) {
    if (Math.floor(diff/60) == 1) {
      return (Math.floor(diff/60) + " minute ago");
    } else {
      return (Math.floor(diff/60) + " minutes ago");
    }
  } else {
    if (diff == 1) {
      return (diff + " second ago");
    } else {
      return (diff + " seconds ago");
    }
  }
}
$(document).ready(function () {
  $(".timeAgo").innerHTML(timeAgo($(".timeAgo").attr("create")));
}

---

但每当我使用多个“.timeAgo”实例运行代码时，它都会将所有实例设置为“.timeAgo”的第一个实例。如何使其使用每个单独的实例？

使用

每个

循环它们，并使用

$（此）

在

每个

中访问每个单独的实例：

$(".timeAgo").each(function() {
    var $el = $(el);
    $el.html(timeAgo($el.attr("create")));
});

还要注意使用

html（）

，而不是

innerHTML=

。尽管在回调中，实际上不需要jQuery：

$(".timeAgo").each(function() {
    this.innerHTML = timeAgo(this.getAttribute("create"));
});

事实上，在任何现代浏览器中，您根本不需要jQuery（但这在IE11中不起作用，除非您使用polyfill

forEach

）：

---

旁注：您似乎正在使用非标准的

create

属性创建元素。WHAT-WG和W3C建议不要这样做，因为在将来的某个时候，该属性总是有可能被赋予标准含义。相反，请使用

data create

（a）并通过

.attr（“数据创建”）

访问它。（请参阅，了解您可能希望或不希望使用

.data（“创建”）

来访问它的原因。）

或

或（如果需要，使用适用于IE11的polyfill）

---

使用

each

循环浏览它们，并在

each

中使用

$（this）

访问每个单独的代码：

$(".timeAgo").each(function() {
    var $el = $(el);
    $el.html(timeAgo($el.attr("create")));
});

还要注意使用

html（）

，而不是

innerHTML=

。尽管在回调中，实际上不需要jQuery：

$(".timeAgo").each(function() {
    this.innerHTML = timeAgo(this.getAttribute("create"));
});

事实上，在任何现代浏览器中，您根本不需要jQuery（但这在IE11中不起作用，除非您使用polyfill

forEach

）：

---

旁注：您似乎正在使用非标准的

create

属性创建元素。WHAT-WG和W3C建议不要这样做，因为在将来的某个时候，该属性总是有可能被赋予标准含义。相反，请使用

data create

（a）并通过

.attr（“数据创建”）

访问它。（请参阅，了解您可能希望或不希望使用

.data（“创建”）

来访问它的原因。）

或

或（如果需要，使用适用于IE11的polyfill）

---

第一：jQuery使用

.html（）

而不是

.innerHTML

（这不是一个函数，所以没有

（）

）；第二：可能需要使用

.each（）

循环遍历所选元素。首先：jQuery使用

.html（）

而不是

。innerHTML

（这不是一个函数，因此没有

（）

）；第二：您需要循环您选择的元素，可能使用

。使用
bind（）
或箭头函数而不是创建一个自引用变量会更好。@marekful-不，上面与
bind
或箭头函数都不相关。
each
的要点是jQuery为回调中的每个DOM元素设置
this
是什么。上面的
$this
不是指
this
，而是指通过调用函数
$（this）
@marekful
$this
创建的jQuery对象。this

只是为了不重复

$（this）

使用

绑定（）

或箭头函数而不是创建自引用变量会更好。@marekful-No，

bind

和箭头函数都与上述内容无关。

each

的要点是jQuery为回调中的每个DOM元素设置

this

是什么。上面的

$this

不是指

this

，而是指通过调用函数

$（this）

@marekful

$this

创建的jQuery对象，只是为了不重复

$（this）

$(".timeAgo").each(function() {
    this.innerHTML = timeAgo(this.getAttribute("data-create"));
});

document.querySelector(".timeAgo").forEach(function(element) {
    element.innerHTML = timeAgo(element.getAttribute("data-create"));
});