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

de bron

ro ru fr es pt de 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.

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