我有两个数组：

//list elements from html
var list = document.querySelectorAll('#pres-list-ul li');
//list of retrieved objects from api
var objects = self.retrievedItems;

列表的内容保存在html文件中,以提高效率(除非刷新,否则无需重新渲染相同的数据)

我想从html中删除列表项,如果它在检索到的对象中不再存在.

我知道它在下面的代码行中,但是我无法解决.

//I need to compare the id? For that another loop - which will run hundreds and thousands of time?
for(var j = 0; j < objects.length; j++) {
  if(objects.indexOf(list[i]) === -1) {
    //false
  } else {
    //true
  }
}

场景：

list:  57 //local
objects:  56 //online

在列表中找到该额外值并将其删除.

清单：

<li id="item-5756" data-category="" data-group="" data-created="" data-author=""></li>

宾语：

0: {
  id: //
  title: //
  description //
  // ...
}

1: {
  //...
}

解决方法:

首先,您必须以某种方式对齐数据.我建议您摆脱这些物品的id =“ item-5756”.请改用data-id =“ 5756”.在获得本地和远程的ID列表之后,您可以使用indexOf进行建议的操作,只隐藏不在远程中的本地元素.

在这里查看：https://jsfiddle.net/jrwyopvs/

var remote_data = {
    5756: {
        id: 5756,
        title: '',
        description: '',
    },
    5757: {
        id: 5757,
        title: '',
        description: '',
    },
    5758: {
        id: 5758,
        title: '',
        description: '',
    },
}

$(document).on('click', '.filter', filter_local)

function filter_local () {
    var local_ids = $('#pres-list-ul li').toArray().map(function (element) { return $(element).data('id') })
    var remote_ids = []
    for (remote_index in remote_data) {
        remote_ids.push(remote_data[remote_index].id)
    }
    console.log(local_ids, remote_ids)

    for (local_id in local_ids) {
        if (remote_ids.indexOf(local_ids[local_id]) == -1) {
            $('#pres-list-ul li[data-id="' + local_ids[local_id] + '"]').hide()
        }
    }
}

请注意,有几种改进方法：

更好的过滤算法：我建议的效率很差.可以一次性对ID进行排序和过滤.使用[data =“ 5678”]的查找也相当慢.

使用数据绑定：考虑使用angular或其他mvc框架使您的项目可维护.这样,您可以只跟踪一个元素列表,并让角度确定重新渲染.