1

Есть вот такой пример: https://jsfiddle.net/nh52furo/ Массив с данными выводится на страницу в div .list Потом массив обновляется, удаляем один элемент и добавляем новую.

Теперь нужно вывести новый элемент в .list, а те элементы которых нет в массиве удалить из дива.

На на данный момент я очищаю .list $('.list').empty(); потом вывожу все заново.

Можно ли как то оптимизировать это, сделать проверку на элемент, что бы удалять только лишние элементы, которых нет в массиве и добавлять только новые ?

Допустим элемент в id 851 уже есть на странице, я его удаляю и заново вывожу, мне кажется это слишком затратно, зачем удалять его и рендерить заново, если можно проверить, но как ?

2
  • Может я не правильно вас понимаю, а метод indexOf для проверки элемента пробовали?
    – Odyssey
    7 июн 2021 в 12:18
  • «мне кажется это слишком затратно» (c) — Кажется или правда затратно? Может вы решаете несуществующую проблему) Иногда может оказаться легче тупо обновить, чем вычислять «по правильному». 7 июн 2021 в 18:49

1 ответ 1

1

Вот так решил, если кому-то интересно, но порожнему, Вы еще можете предложить свой вариант и я буду рад и благодарен Вам!

demo: https://jsfiddle.net/s4fqpLgc/

const arr = [
    {id: 850, name: 'hello'},
    {id: 851, name: 'world'},
    {id: 852, name: 'hello'},
    {id: 853, name: 'john'},
    {id: 854, name: 'putin'},
];

function render() {
    // .in-cart - класс модификатор, им мы будем помечать элементы которые уже имеются  на странице


    //сперва удаляем класс у всех элементов 
    $('.item').removeClass('in-cart');
  
  arr.forEach(item => {
     //помечаем элементы которые уже были отрендерены  
     $(`.item[data-id="${item.id}"]`).addClass('in-cart');
    
    //если элемента нет, то рендерим его
    if($(`.item[data-id="${item.id}"]`).length == 0) { 
       $('.list').append(`
        <span class="item in-cart" data-id="${item.id}">${item.name} id:${item.id}</sapn>
      `);
    }
  });
 
  //проходим по всем **не** помеченным элементам, так-как они лишние - удаляем 
  $('.item').each(function(){
    if(!$(this).hasClass('in-cart')) {
      $(this).remove();
    }
  });

}

render();

arr.splice(3, 1);
arr.push({id: 888, name: 'rov'});

render();
console.log(arr)

$('.add').click(function(){
    var id = Math.floor(Math.random() * 500);
    arr.push({id: id, name: 'new ' + id});
  render();
});
console.log(arr)

В итоге мы рендерим только новые элементы и избавляемся от надобности рендерит элементы снова. Это особенно помогает, когда у вас там инпуты, которы вы заполнили, потом добавили еще один элемент, а из-за того что оно рендерится снова все инпуты сбрасываются.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.