我有以下 JavaScript 和 jQuery,可以完美运行:
function updateTaskTypes(taskTypes) {
$.each(taskTypes, function (idx, e) {
var contains = $("#async_TaskTypes").find("a:contains('" + e + "')").length > 0;
if (!contains) {
var html = "<li><a href=\"#tab" + idx + "\">" + e + "</a></li>";
$("#async_TaskTypes").append(html);
}
});
}
上面的代码接受一个字符串数组。目的是添加 <li>
至#async_TaskTypes
如果它尚未包含一个。
HTML 的格式为:
<ul id="async_TaskTypes" class="tabs">
<li><a href="#tab0">Preview Blog Comment</a></li>
<li><a href="#tab1">Respond To Contact Us</a></li>
</ul>
我的问题是 jQuery 似乎没有达到应有的效率。有没有办法让上面的代码更加高效?
我所说的“高效”,是指也许我可以使用更直接的 jQuery 函数,或者更简洁的算法等......基本上是更优雅的代码。
最佳答案
在 DOM 中搜索总是效率低下。您应该有一个模型,用于存储哪些任务已在显示的列表中,以便您可以使用数组方法简单地搜索(如果排序,甚至可能在 O(n)
中进行搜索)。这可以做到,例如:
function updateTaskTypes(taskTypes) {
var $ul = $("#async_TaskTypes"),
texts = $ul.find("a").map(function(){
return $(this).text();
}).get();
$.each(taskTypes, function (idx, e) {
if ($.inArray(texts, e) == -1)
$ul.append("<li><a href=\"#tab" + idx + "\">" + e + "</a></li>");
});
}
或者您只需删除所有列表项并重新附加整个任务列表,这更简单,对于短列表可能更快:
function updateTaskTypes(taskTypes) {
var $ul = $("#async_TaskTypes").empty();
$.each(taskTypes, function (idx, e) {
$ul.append("<li><a href=\"#tab" + idx + "\">" + e + "</a></li>");
});
}
关于javascript - 更高效的 jQuery 版本包含,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15324183/