2012-01-04 51 views
0

如何使用mootools在我的div容器中過濾(替換empty()函數)?這裏 問:我如何可以替換下面我的代碼:Mootools過濾

  1. 從容器中取出(<div id="fc_contacts" class="fc_contacts">)與id="fc_ID"塊,其不存在於JSON字符串
  2. 添加新的塊容器(<div id="fc_contacts" class="fc_contacts">)如果要是不存在於容器中
  3. 如果friend_id在容器中並且在JSON中 - 什麼也不做。

請檢查代碼。

我下面的代碼:

{"users": [{"friend_id":"62","name":"admin","username":"admin"},{"friend_id":"66","name":"other","username":"other"}],"total": "1","total_online":"1"} 

    onSuccess: function(f){ /*Periodical function*/         
     for(var i=0; i< f.users.length;i++){ 
      if(f.users[i].friend_id){               
       friends.push(chat.render('add_contact',f.users[i])); 
      } 
     } 

     /* Question here: How can I replace my code below to: 
      1. Remove from container(<div id="fc_contacts" class="fc_contacts">) blocks with id="fc_ID" which not exist in JSON string 
      2. Add new block to container(<div id="fc_contacts" class="fc_contacts">) if if doesn't exist in container 
      3. If friend_id is in container and in the JSON - do nothing.  
     */ 

     $('fc_contacts').empty(); /*Replace this*/ 
     $('fc_contacts').addContacts(friends.join(''), 'bottom'); /*ELSE - ADD NEW*/ //el.empty(); 

    } 


    Element.implement({ 
     addContacts: function(html,where){ 
      return this.grab(new Element('<div>', { 
       'html': html, 
       'class': 'fc_contacts_container' 
      }),where);   
     } 
    }); 


    <div id="fc_contacts" class="fc_contacts"> 
     <div class="fc_contacts_container"> 
      <div class="fc_contact clear_fix" id="fc_62"> 
       <!--OTHER HTML!-> 
      </div> 
     </div> 
     <div class="fc_contacts_container"> 
      <div class="fc_contact clear_fix" id="fc_66"> 
       <!--OTHER HTML!-> 
      </div> 
     </div> 
    </div> 

謝謝!

PS

它的工作原理與jQuery(但我需要它是兼容Mootools的):

var ids = []; 
for(var i=0; i<f.users.length;i++){        
ids.push('fc-' + f.users[i].friend_id); 
} 
jQuery('#fc_contacts').append(friends.join('')).children().filter(function(i) { 
    return ids.indexOf(this.id) === -1; 
}).remove(); 

回答

1

user889349, 這裏是如何,我會做到這一點:

$('fc_contacts').getElements("div.fc_contact").each(function(c) { 
    var id = c.get("id"); 
    if(!f.users.some(function(u){return id == 'fc_'+u.friend_id;})) 
     c.destroy(); 
}); 
f.users.each(function(u) { 
    if(!$('fc_'+u.friend_id)) 
     $('fc_contacts').addContacts(chat.render('add_contact',u), 'bottom'); 
}); 

分兩步......