$("SELECTOR").css() 的复杂度
Complexity of $("SELECTOR").css()
我正在尝试隐藏不在过滤用户列表中的用户。
为此,我正在使用此代码
_.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})
的复杂性吗?有什么方法可以即兴创作吗?
这个 $("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>
我正在尝试隐藏不在过滤用户列表中的用户。
为此,我正在使用此代码
_.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})
的复杂性吗?有什么方法可以即兴创作吗?
这个 $("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>