Geavanceerde jQuery-filtering jQuery-array

Vraag alsjeblieft:

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

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

Hoe mijn jQuery te gebruiken, mijn container ziet er zo uit:

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

Verwijder div met id = "user_5" (we hebben dit niet in onze lijst met id's) en voeg div toe met id = "user_666" (in onze lijst met id's).

Dank u zeer!

Ik heb zoiets geprobeerd, maar dit werkt niet:

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();
2
Ik probeer bestaande markeringen te wijzigen.
toegevoegd de auteur user889349, de bron
Probeert u de opmaak uit uw array op te bouwen of probeert u bestaande markup met uw array aan te passen?
toegevoegd de auteur jrummell, de bron

3 antwoord

Zoiets zou werken en zou het vermijden van het verstoren van bestaande 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');    
    }
}

Het stelt de tekst niet precies goed bij het toevoegen van nieuwe. Ik neem aan dat je in je echte code een objecteigenschap in de array hebt die je daarvoor kunt gebruiken.

Het bestelt ze ook niet bij het toevoegen, maar dat zou mogelijk zijn met insertAfter() .

2
toegevoegd
Thans! Briljant!
toegevoegd de auteur user889349, de bron

Als de array alle elementen bevat die u in de lijst wilt hebben, kunt u beginnen met een leeg element en alle elementen uit de lijst toevoegen, zoiets als:

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

Dit zou veel eenvoudiger zijn dan proberen uit te werken wat je al hebt in het element en dat vervolgens te wijzigen.

1
toegevoegd
Bedankt. Het is eenvoudiger, maar ik heb een andere oplossing nodig.
toegevoegd de auteur user889349, de bron
Deze oplossing krijgt een knippereffect na het vervangen van HTML in container ...
toegevoegd de auteur user889349, de bron
Als je een onmiddellijke wijziging wilt, bouw dan de HTML in een string in plaats van toe te voegen in je loop. Stel vervolgens de html voor de container in.
toegevoegd de auteur jrummell, de bron
waarom? deze oplossing geeft hetzelfde eindresultaat met minder shenanigans.
toegevoegd de auteur jbabey, de bron

Here is my solution, on jsFiddle: http://jsfiddle.net/aTkPZ/2/

En hier is de 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>');
    }
});
0
toegevoegd
Oh man, ik strijd tegen @Dave Ward. Ik geef nu toe dat ik verslagen ben. ;-) Hoewel ik eigenlijk vind dat onze oplossingen redelijk op elkaar lijken. Zijn is waarschijnlijk echter iets sneller.
toegevoegd de auteur GregL, de bron