高级jQuery筛选jQuery数组

问题:

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>

---

如果数组包含您希望在列表中的所有元素，则可以从空元素开始，然后添加列表中的所有元素，如：

   $("#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>' );   
   }

$（“#聊天用户”）.children（）.remove（）；
var id=['user_1'、'user_2'、'user_3'、'user_666']；
用于（id中的id）{
$（“#聊天用户”）.append（'username-X'）；
}

---

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

类似的操作将有效，并避免中断现有项目：

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

var id=['user_1'、'user_2'、'user_3'、'user_666']；
$（'#chatUsers'）.children（）.filter（function（））{
返回id.indexOf（this.id）=-1；
}).remove（）；
var-length=ids.length；
对于（变量i=0；i

在添加新文本时，它没有完全正确地设置文本。我假设在实际代码中，数组中有一个对象属性，您可以使用它

---

它在追加时也不会对它们进行排序，但使用

insertAfter（）

这是我在JSFIDLE上的解决方案：

下面是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>');
    }
});

$（函数（）{
var id=['user_1'、'user_2'、'user_3'、'user_666']
var div=$（“#chatUsers”）；
变量选择器='#'+ids.join（'，#'）；
div.find（'div'）.not（选择器）.remove（）；//删除不在列表中的
对于（变量i=0，max=ids.length；i

您是在尝试从数组生成标记，还是在尝试使用数组修改现有标记？我正在尝试修改现有标记。谢谢。这更简单，但我需要其他解决方案。为什么？这个解决方案用更少的诡计得到相同的最终结果。如果你想立即改变，用字符串来构建html，而不是在循环中追加。然后设置容器的html。哦，伙计，我要和@Dave Ward竞争。我现在承认失败虽然我认为我们的解决方案非常相似。不过，他的速度可能稍快一些。

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

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