$（“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="[email protected]"> 
    <input type="checkbox" name="user" value="[email protected]"> Cordelia Lear ([email protected]) 
</label> 
<label class="checkbox" for="[email protected]"> 
    <input type="checkbox" name="user" value="[email protected]"> Cordelia Lear ([email protected]) 
</label>

有人能解释什么是的$("label[for='" + user.email + "']").css({"display":display_type})复杂性？任何可能的方式来即兴创作？

来源

2016-08-12 kartikmaji

'.css（）'不应该是这里的瓶颈。你的用户列表有多长？ – Kemi

大约有1000个或更多的用户。 – kartikmaji

你可以添加一些用户的HTML吗？ –

这个$("label[for='" + user.email + "']")是减慢你的部分。对于每个用户，jquery的sizzle引擎必须遍历页面中的所有标签，并选择确切的标签，因此迭代用户至少为o（n）* o（n） - o（n2）。

要解决，您可以通过电子邮件，制作一张标签一次，然后用O（1），发现该元素并更改显示（您filtered_users做同样的事情）：

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: '[email protected]' }, 
 
     { email: '[email protected]'} 
 
     ]; 
 

 
var filtered_users = { '[email protected]': 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="[email protected]"> 
 
    <input type="checkbox" name="user" value="[email protected]">Cordelia Lear ([email protected]) 
 
    </label> 
 
    <label class="checkbox" for="[email protected]"> 
 
    <input type="checkbox" name="user" value="[email protected]">Cordelia Lear ([email protected]) 
 
    </label> 
 
</div>

来源

2016-08-12 15:51:44

$（“SELECTOR”）的复杂性。css（）

回答

相关问题