$("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(n) * o(n) - o (n2).

为了解决这个问题，您可以通过电子邮件创建标签映射一次（与 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>

$("SELECTOR").css() 的复杂度

Complexity of $("SELECTOR").css()

javascript

css

jquery

time-complexity

jquery-selectors