Geavanceerde jQuery-filtering jQuery-array

Question

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

toegevoegd 27 oktober 2011 op 05:32 de auteur user889349 bewerkt 27 oktober 2011 op 10:52

Bekeken: 15

de bron

ro ru fr es pt de zh hi bn ar be

Ik probeer bestaande markeringen te wijzigen.

toegevoegd 27 oktober 2011 op 06:15, 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 27 oktober 2011 op 05:47, 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 27 oktober 2011 op 06:24 de auteur Dave Ward

de bron

Thans! Briljant!

toegevoegd 27 oktober 2011 op 06:35, de auteur user889349, de bron

de auteur Steve Claridge · Answer 1 · 2011-10-27T05:47Z

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 27 oktober 2011 op 05:47 de auteur Steve Claridge

de bron

Bedankt. Het is eenvoudiger, maar ik heb een andere oplossing nodig.

toegevoegd 27 oktober 2011 op 05:54, de auteur user889349, de bron

Deze oplossing krijgt een knippereffect na het vervangen van HTML in container ...

toegevoegd 27 oktober 2011 op 06:08, 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 27 oktober 2011 op 06:19, de auteur jrummell, de bron

waarom? deze oplossing geeft hetzelfde eindresultaat met minder shenanigans.

toegevoegd 27 oktober 2011 op 05:58, de auteur jbabey, de bron

de auteur GregL · Answer 2 · 2011-10-27T06:27Z

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