过滤通过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的更改。