過濾通過Facebook的圖形API（多一個JavaScript/jQuery的問題比Facebook API問題）提取好友列表

Question

你好JavaScript和jQuery的大師，我得到，然後通過使用以下顯示一個Facebook用戶的好友列表名單代碼：現在

<script> 
function getFriends(){ 
var theword = '/me/friends'; 
FB.api(theword, function(response) { 
    var divInfo = document.getElementById("divInfo"); 
    var friends = response.data; 
    divInfo.innerHTML += '<h1 id="header">Friends/h1><ul id="list">'; 
    for (var i = 0; i < friends.length; i++) { 
    divInfo.innerHTML += '<li>'+friends[i].name +'</li>'; 
    } 
    divInfo.innerHTML += '</ul></div>'; 
}); 
} 

</script> 

<a href="#" onclick="getFriends(); return false;">graph friends</a> 
<div id = divInfo></div> 

，在我的Facebook集成的網站，我希望最終我的用戶選擇自己的朋友，並送他們禮物/ Facebook的衝them..or什麼。因此，我想利用這段代碼，與DOM操縱現在

 <script> 

(function ($) { 
    // custom css expression for a case-insensitive contains() 
    jQuery.expr[':'].Contains = function(a,i,m){ 
     return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0; 
    }; 


    function listFilter(header, list) { // header is any element, list is an unordered list 
    // create and add the filter form to the header 
    var form = $("<form>").attr({"class":"filterform","action":"#"}), 
     input = $("<input>").attr({"class":"filterinput","type":"text"}); 
    $(form).append(input).appendTo(header); 

    $(input) 
     .change(function() { 
     var filter = $(this).val(); 
     if(filter) { 
      // this finds all links in a list that contain the input, 
      // and hide the ones not containing the input while showing the ones that do 
      $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(); 
      $(list).find("a:Contains(" + filter + ")").parent().slideDown(); 
     } else { 
      $(list).find("li").slideDown(); 
     } 
     return false; 
     }) 
    .keyup(function() { 
     // fire the above change event after every letter 
     $(this).change(); 
    }); 
    } 


    //ondomready 
    $(function() { 
    listFilter($("#header"), $("#list")); 
    }); 
}(jQuery)); 

    </script> 

實現一個簡單的Jquery filter，這段代碼工作正常無序列表上，但是當列表由JavaScript渲染，它不。我有一個預感，它必須用innerHTML方法做些事情。此外，我已經嘗試把JQuery過濾器代碼放在標籤之內。似乎都沒有工作。

如果有人知道如何解決這個問題，請幫助我。此外，是否有更好的方式來顯示用戶可以從中選擇的朋友列表？

Answer 1

的問題是在這裏：

$(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(); 
$(list).find("a:Contains(" + filter + ")").parent().slideDown(); 

既然你呈現這個：

divInfo.innerHTML += '<li>'+friends[i].name +'</li>'; 

沒有錨包裝，文字直接在<li>所以更改前兩行相應地看那些元素，如下所示：

$(list).find("li:not(:Contains(" + filter + "))").slideUp(); 
$(list).find("li:Contains(" + filter + ")").slideDown(); 

---

你也能有這樣整段快一點通過運行您的Contains()代碼只有一次，做一個大的協議爲長的列表，像這樣：

$(input).bind("change keyup", function() { 
    var filter = $(this).val(); 
    if(filter) { 
    var matches = $(list).find("li:Contains(" + filter + ")").slideDown(); 
    $(list).find("li").not(matches).slideUp(); 
    } else { 
    $(list).find("li").slideDown(); 
    } 
}); 

---

，並解決這些潛在的（可能是真的）innerHTML的問題，通過使用DOM，像這樣建立自己的結構：

function getFriends(){ 
    var theword = '/me/friends'; 
    FB.api(theword, function(response) { 
    var divInfo = $("#divInfo"), friends = response.data; 
    divInfo.append('<h1 id="header">Friends/h1>'); 
    var list = $('<ul id="list" />'); 
    for (var i = 0; i < friends.length; i++) { 
     $('<li />', { text: friends[i].name }).appendTo(list); 
    } 
    divInfo.append(list); 
}); 
} 

通過做這種方式你一次全部建立了內容，則<ul>是一個文檔片段，那麼一個插入。 ...這對於性能來說也更好，原因有兩個。 1）你是目前添加無效的HTML與.innerHTML電話......你永遠不應該在任何時候未閉合的元素，2）你正在做的頭，1 2個DOM操作（1名單） 之後更快的文件碎片創建，不會重複.innerHTML的更改。