Как индивидуально выбрать каждый соответствующий селектор

Question

Я пытаюсь создать скрипт с jQuery, где он находит элементы с классом "timeA go" и заменяет его внутренний HTML на то, как долго go было время в атрибуте 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")));
}

Но всякий раз, когда я запускаю код с несколькими экземплярами «.timeA go», он устанавливает для всех них первый экземпляр «.timeA go». Как мне сделать так, чтобы он использовал каждый отдельный экземпляр?

Answer 1

Используйте each для l oop через них и $(this) в пределах each для доступа к каждому отдельному:

$(".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, если только Вы выполните мои шаги здесь , чтобы заполнить forEach):

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

---

Примечание: вы, похоже, создаете элементы с нестандартным атрибутом create. Рекомендации WHAT-WG и W3 C не делают этого, поскольку всегда возможно, что атрибуту будет назначено стандартное значение в будущем. Вместо этого используйте data-create (атрибут data-* ) и получите к нему доступ через .attr("data-create"). (См. мой ответ здесь , почему вы можете или не захотите использовать вместо него .data("create").)

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

или

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

или (с полифилом для IE11, если необходимо)

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