$（ "SELECTOR"）の複雑さ。css（）

Question

フィルタリングされたユーザーリストにないユーザーを非表示にしようとしています。このため

、私はこのコード usersは、すべてのユーザーオブジェクトのリストであると filtered_usersがフィルタリングユーザーの電子メールのリストである

_.each(users, function (user) { 
    var display_type = filtered_users.hasOwnProperty(user.email)? "block" : "none"; 
    $("label[for='" + user.email + "']").css({"display":display_type}); 
}); 

を使用しています。 私は約1000人以上のユーザーからフィルタリングしています。そして、$("label[for='" + user.email + "']").css({"display":display_type})の操作に時間がかかりすぎているようです。

HTML：

<label class="checkbox" for="user1@gmail.com"> 
    <input type="checkbox" name="user" value="user1@gmail.com"> Cordelia Lear (cordelia@zulip.com) 
</label> 
<label class="checkbox" for="user2@gmail.com"> 
    <input type="checkbox" name="user" value="user2@gmail.com"> Cordelia Lear (cordelia@zulip.com) 
</label> 

誰かが$("label[for='" + user.email + "']").css({"display":display_type})の複雑さだかを説明することはできますか？それを即興化する方法はありますか？

Answer 1

この$("label[for='" + user.email + "']")は、あなたを遅くする部分です。すべてのユーザーにとって、jqueryのシズルエンジンは、ページ内のすべてのラベルを調べ、正確なものを選択する必要があります。したがって、ユーザーo（n2）を反復するには少なくともo（n）* o（n）です。あなたは（あなたがfiltered_usersのために行うのと同じもの）後に電子メールでラベルのマップを作成し、Oで（1）、要素を検索し、表示を変更できることを解決するために

：

var usersMap = $('.users') 
 
    .find('label') 
 
    .toArray() 
 
    .reduce(function(map, user) { 
 
    var $user = $(user); 
 
    var email = $user.attr('for'); 
 
    map[email] = $user; 
 
    return map; 
 
    }, {}); 
 

 
var users = [ 
 
     { email: 'user1@gmail.com' }, 
 
     { email: 'user2@gmail.com'} 
 
     ]; 
 

 
var filtered_users = { 'user1@gmail.com': true }; 
 

 
users.forEach(function(user) { 
 
    var display_type = filtered_users.hasOwnProperty(user.email) ? "block" : "none"; 
 
    usersMap[user.email].css({ 
 
    "display": display_type 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="users"> 
 
    <label class="checkbox" for="user1@gmail.com"> 
 
    <input type="checkbox" name="user" value="user1@gmail.com">Cordelia Lear (cordelia@zulip.com) 
 
    </label> 
 
    <label class="checkbox" for="user2@gmail.com"> 
 
    <input type="checkbox" name="user" value="user2@gmail.com">Cordelia Lear (cordelia@zulip.com) 
 
    </label> 
 
</div>