Сложность $ ("SELECTOR"). Css()

Question

Я пытаюсь скрыть пользователей, не входящих в список фильтрованных пользователей.

Для этого я использую этот код

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

Где users находится список всех пользовательских объектов и filtered_users является список электронной почты отфильтрованных пользователей. У меня есть около 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 sizzle должен перебирать все метки на странице и выбирать точный, поэтому для итерации пользователей - o (n2) требуется не менее o (n) * o (n).

Чтобы решить, что вы можете создать карту этикетки на электронную почту один раз (то же самое, что вы делаете для filtered_users), а затем о (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>