Question

Question please:

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

My 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>

How to using jQuery make my container looks like this:

<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>

Remove div with id="user_5" (we have no this in our ids list) and add div with id=”user_666″ (in our ids list).

Thank you very much!

I’m tried something like that, but this not work:

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

Something like this would work, and avoid disrupting existing items:

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

It doesn’t set the text exactly right when appending new ones. I’m assuming in your real code, you’ve got an object property in the array that you can use for that.

It also doesn’t order them when appending, but that would be possible with insertAfter().