$("SELECTOR").css() 的复杂性答案

【问题标题】：Complexity of $("SELECTOR").css()$("SELECTOR").css() 的复杂性
【发布时间】：2017-01-18 18:16:48
【问题描述】：

我正在尝试隐藏不在过滤用户列表中的用户。

为此，我正在使用此代码

_.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}) 的复杂性是什么？有什么方法可以即兴发挥吗？

【问题讨论】：

.css() 不应该是这里的瓶颈。您的users 列表有多长？
大约 1000 个或更多用户。
可以添加一些用户html吗？
添加了 html 示例。

标签： javascript jquery css jquery-selectors time-complexity

【解决方案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>

【讨论】：