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为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>');
    }
});

高级jQuery过滤jQuery数组

3 个答案: