高级 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（我们的id 列表中没有这个）并添加带有id="user_666" 的div（在我们的id 列表中）。

非常感谢！

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

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() 可以做到这一点。

Answer 2

如果数组包含您想要在列表中的所有元素，那么您可以从一个空元素开始并添加列表中的所有元素，例如：

   $("#chatUsers").children().remove();

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

   for ( id in ids ) {
     $("#chatUsers").append( '<div id="' + id + '">username-X</div>' );   
   }

这比尝试找出元素中已有的内容然后对其进行修改要简单得多。

Answer 3

这是我在 jsFiddle 上的解决方案：http://jsfiddle.net/aTkPZ/2/

这里是 JavaScript：

$(function(){
    var ids = ['user_1', 'user_2', 'user_3', 'user_666'];   
    var div = $('#chatUsers');
    var selector = '#' + ids.join(', #');
    div.find('div').not(selector).remove(); // remove ones not in the list
    for (var i = 0, max = ids.length; i < max; i++) {
        if (!div.find('#' + ids[i]).length)
            div.append('<div id="' + ids[i] + '">username-' + ids[i].replace('user_','') + '</div>');
    }
});