高度な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>

id = "user_5" でdivを削除し、divでID = "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
追加された 編集された
ビュー: 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!ブリリアント!
追加された 著者 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 Wardと競合している。私は今敗北を認めます。 ;-)実際に私たちのソリューションはかなり似ていると思っていますが。しかし、彼の方がやや速いですね。
追加された 著者 GregL,