Пашыраныя магчымасці фільтрацыі 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>

Як з дапамогай jQuery зрабіць мой кантэйнер выглядае наступным чынам:

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

Выдаліць DIV з ід = «user_5» (мы не маем гэтага ў нашым спісе ID) і дадаць DIV з ідэнтыфікатарам = «user_666» (у нашым спісе ID).

Вялікі дзякуй!

Я спрабаваў нешта падобнае, але гэта не працуе:

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
Я спрабую змяніць існуючую разметку.
дададзена аўтар user889349, крыніца
Вы спрабуеце пабудаваць разметку з вашага масіва ці вы спрабуеце змяніць існуючую разметку з дапамогай масіва?
дададзена аўтар jrummell, крыніца

3 адказы

Нешта, як гэта будзе працаваць, і пазбегнуць парушэнні існуючых пунктаў:

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

Ён не задае тэкст, прама пры даданні новых. Я мяркую, што ў вашым рэальным кодзе, у вас ёсць ўласцівасць аб'екта ў масіве, які вы можаце выкарыстоўваць для гэтага.

Ён таксама ня упарадкоўвае іх пры даданні, але гэта было б магчыма з InsertAfter() .

2
дададзена
Thans! Brilliant!
дададзена аўтар user889349, крыніца

Калі масіў змяшчае ўсе элементы, якія вы хочаце быць у спісе, то вы можаце пачаць з пустым элементам і дадаць ўсе элементы з спісу, нешта накшталт:

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

Гэта было б значна прасцей, чым спрабаваць высветліць, што ў вас ужо ёсць у элеменце, а затым ўнясенне змяненняў гэтага.

1
дададзена
Дзякуючы. Гэта прасцей, але мне трэба іншае рашэнне.
дададзена аўтар user889349, крыніца
Гэта рашэнне атрымаць мігцення эфекту пасля замены HTML ў кантэйнеры ...
дададзена аўтар user889349, крыніца
Калі вы хочаце неадкладнае змяненне, пабудаваць HTML у радку замест дадання ў цыкле. Затым ўсталюйце HTML для кантэйнера.
дададзена аўтар jrummell, крыніца
чаму? гэтае рашэнне дае той жа самы канчатковы вынік з меншай колькасцю выхадак.
дададзена аўтар jbabey, крыніца

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

А вось 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
дададзена
Пра людзей, я спаборнічаю супраць Уорд @ Dave. Я прызнаю паразу ў цяперашні час. ;-) Хоць я на самай справе думаю, што нашы рашэнні даволі падобныя. Яго, верагодна, крыху хутчэй, хоць.
дададзена аўтар GregL, крыніца