Блог

Главная - Вопросы по программированию - jQuery $.каждый на динамически добавляемых элементах в DOM

jQuery $.каждый на динамически добавляемых элементах в DOM

#javascript #jquery

#javascript #jquery

Вопрос:

Проблема заключается в обновлении поля span значением метки времени. Поэтому, если пользователь A отправит сообщение, оно будет создано.элемент с одним сообщением вставляется в dom и имеет текущую временную метку. Однако следующий код не обновляется, когда это происходит:

 setInterval(_updateTimestamps, 15000);

function _updateTimestamps()
{
    $.each($('[data-timestamp]'), function(index, value) {
        var unix = parseInt($(this).attr('data-unix'));

        unix = unix * 1000;

        var now = new Date().getTime();

        var difference = (now - unix) / 1000;

        var result = '';

        var days = Math.floor(difference / (3600 * 24));
        // var weeks = Math.floor(difference / (60 * 60 * 24 * 7));
        var weeks = Math.floor(difference / (1000 * 7 * 24 * 60 * 60));
        var hours = Math.floor((difference % (60 * 60 * 24)) / (60 * 60));
        var minutes = Math.floor(((difference % (60 * 60 * 24)) % (60 * 60)) / 60);
        var seconds = Math.floor(((difference % (60 * 60 * 24)) % (60 * 60)) % 60);

        if (days > 0) {
            result = days   'd';
            $(this).text(result);
            return;
        }
        if (weeks > 0) {
            result = weeks   'w';
            $(this).text(result);
            return;
        }
        if (hours > 0) {
            result = hours   'h';
            $(this).text(result);
            return;
        }

        if (minutes > 0) {
            result = minutes   'm';
            $(this).text(result);
            return;
        }

        if (seconds > 0) {
            result = seconds   's';
            $(this).text(result);
            return;
        }
    });
}

Что я должен сделать, чтобы динамически создаваемые элементы DOM зацикливались и обновлялись?

Комментарии:

1. Селектор пересматривается каждый раз при запуске кода, поэтому, если добавленные элементы действительно имеют data-timestamp атрибут, код как есть будет работать с ними.

2. Одна вещь, которая выглядит немного подозрительной, заключается в том, что объект jQuery основан на атрибуте data-timestamp , но первое, что делает код, это проверяет data-unix .

3. Итак, я прав, полагая, что у вас есть группа элементов DOM с атрибутом ‘data-timestamp’, и у этих элементов также есть атрибут data-unix? Не похоже, что вы когда-либо получаете временную метку текущего элемента.

4. Как насчет использования наблюдателя мутаций для просмотра изменений в свойстве «Дочерний список» в document.body. Таким образом, всякий раз, когда в ваш документ добавляется новый элемент. тело вашего обратного вызова вызывается. При обратном вызове вы можете проверить, является ли добавленный элемент «.single-message», а затем обновить временную метку.

Ответ №1:

Вместо того, чтобы использовать метод setInterval, я предлагаю вам использовать mutation observer для отслеживания динамического добавления элементов «.single-message» в DOM. Вот псевдокод.

  var observer = new MutationObserver(function(mutationsList) {

  for(var mutation of mutationsList) {
   if (mutation.type == 'childList') {
       console.log('A child node has been added or removed.');
       if(document.querySelectorAll(".single-message").length ! = messageCount){
        //update all time stamps here.
       }
      }       
    }    
 });

var messageCount = document.querySelectorAll(".single-message").length;
observer.observe(document.body, {childList: true, subtree: true});