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>

删除div与id="user_5"(我们没有这个在我们的id列表)，并添加div与id="user_666"(在我们的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>');
    }
});