Сохранять jQuery сгенерированную разметку между setInterval AJAX

Question

Сценарий ниже генерирует разметку в режиме реального времени и autoupdates с setInterval. Разметка состоит из button и скрытого содержимого в div s. Отдельная кнопка скрывает свой соответствующий div. Однако на каждом интервале div снова скрывается. Я пытаюсь сохранить такой конкретный div, показанный после каждого интервала, после щелчка. Есть ли способ для DOM запомнить, какой div был показан на предыдущем обновлении интервала? Я пытаюсь достичь этого с помощью интерфейсного JavaScript, без серверных решений. Заранее спасибо!

setInterval(itemMenu,1500); 

function itemMenu() { 

    $.ajax({ 
     type: "GET", 
     url: "Administration/data/people.xml" 
    }).done(function (xml) { 

     $("#loadMe").empty(); 
     $("#toadMe").empty(); 

     $(xml).find('fullName').each(function(index) { 

      //////////////////////////// 
      // generate loadMe markup // 
      var i = index + 1; 
      var fullName = $(this).text(); 

      $('<button type="button" class="mybutton" name="users" onclick="itemContent(this.value)"></button>').attr('value', i).html(fullName).appendTo('#loadMe'); 

      //////////////////////////// 
      // generate toadMe markup // 
      var firstName = $(this).siblings('firstName'); 
      var lastName = $(this).siblings('lastName'); 
      var age = $(this).siblings('age'); 
      var hometown = $(this).siblings('hometown'); 
      var job = $(this).siblings('job'); 

      $('<div></div>').attr('id', i).appendTo('#toadMe'); 
      $('<h1></h1>').html(firstName).appendTo('#' + i); 
      $('<h1></h1>').html(lastName).appendTo('#' + i); 
      $('<h1></h1>').html(age).appendTo('#' + i); 
      $('<h1></h1>').html(hometown).appendTo('#' + i); 
      $('<h1></h1>').html(job).appendTo('#' + i); 

      $('#'+i).hide(); 

     }); 
    }).fail(function (response, error) { 
     $('#info').text('Error!'); 
    }); 

}; 

function itemContent(k) { 
    $("#"+k).show(); 
}; 

Answer 1

Рассматривали ли вы только генерировать <div> при нажатии на кнопку вместо этого, так что вы не постоянно перезаписывать эти элементы, когда XML опрашивается? Что-то вроде этого:

setInterval(refreshXml, 1500); 

function refreshXml() { 
    var req = $.get('Administration/data/people.xml'); 

    req.done(function(xml) { 
    // Update the global XML variable used to create buttons. 
    window.peopleXml = xml; 

    // Clear existing buttons. 
    $('#loadMe').empty(); 

    // Display a button for each XML person entity. 
    $(xml).find('fullName').each(function(index) { 
     var fullName = $(this).text(); 

     $('<button>', { 
      'class': 'mybutton', 
      value: $(this).siblings('id').text(), 
      text: fullName 
     }).appendTo('#loadMe');   
    }); 

    // Update any person divs that were already visible. 
    $('#toadMe .person').each(function() { 
     // Grabs the ID from data-person-id set earlier. 
     var id = $(this).data('person-id'); 

     show_person(id); 
    }); 
    }); 
} 

function show_person(id) { 
    $('#person-detail-' + id).remove(); 

    get_person(id).appendTo('#toadMe'); 
} 

function get_person(id) { 
    var $person = $(window.peopleXml).find('id:contains(' + id + ')').parent(); 

    var $div = $('<div>', { 
    'class': 'person', 
    'data-person-id': id, 
    id: 'person-detail-' + id 
    }); 

    $('<h1>', { text: $person.find('firstName').text() }).appendTo($div); 
    $('<h1>', { text: $person.find('lastName').text() }).appendTo($div); 
    $('<h1>', { text: $person.find('age').text() }).appendTo($div); 
    $('<h1>', { text: $person.find('hometown').text() }).appendTo($div); 
    $('<h1>', { text: $person.find('job').text() }).appendTo($div); 

    return $div; 
} 

$(document).on('click', '.mybutton', function() { 
    show_person(this.value); 
}); 

Как растет ваш файл XML, этот подход будет иметь смысл, даже если это кажется немного более сложным на первый. Накладные расходы для предварительного генерации <div> для каждых возможных person каждые 1,5 секунды стали заметно отставать от браузера, поскольку XML-документ становится реальным.