jquery - 高级 jQuery 过滤 jQuery 数组

Question

请提问:

var ids = ['user_1', 'user_2', 'user_3', 'user_666'];   

我的 HTML

<div id="chatUsers">
   <div id="user_1">username-1</div>
   <div id="user_2">username-2</div>
   <div id="user_5">username-5</div>
</div>

如何使用 jQuery 使我的容器看起来像这样:

<div id="chatUsers">
   <div id="user_1">username-1</div>
   <div id="user_2">username-2</div>
   <div id="user_3">username-3</div>
   <div id="user_666">username-666</div>
</div>

删除带有 id="user_5" 的 div(我们的 ids 列表中没有这个)并添加带有 id="user_666"的 div(在我们的 ids 列表中)。

非常感谢!

我尝试过类似的方法，但这不起作用:

jQuery('#chatUsers').filter(function() {
   var a = jQuery(this).find('div');
   alert ("Filtering: divs count: " + a.length);
   //if (!a.length)
   //return true;
   var id =  a.attr('id');  
   if (jQuery.inArray(id,  ids) >= 0)
      return false;
   return true;
}).remove();

Answer 1

像这样的东西会起作用，并且避免破坏现有的项目:

var ids = ['user_1', 'user_2', 'user_3', 'user_666'];   

$('#chatUsers').children().filter(function() {
     return ids.indexOf(this.id) === -1;
}).remove();

var length = ids.length;

for (var i = 0; i < length; i++) {
    if (!document.getElementById(ids[i])) {
        $('<div>', { id: ids[i], text: ids[i] }).appendTo('#chatUsers');    
    }
}

添加新文本时，它不会将文本设置得完全正确。我假设在您的真实代码中，您在数组中有一个对象属性，您可以为此使用它。

它在追加时也不对它们进行排序，但这可以通过 insertAfter() 实现。