我有以下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
,则目的是添加<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>
。
HTML的格式为:
{{1}}
我的问题是jQuery看起来效率不高。有没有办法让上面的代码更有效率?
通过'高效',我的意思是也许我可以使用更直接的jQuery函数,或者更简洁的算法等......基本上更优雅的代码。
答案 0 :(得分:2)
在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>");
});
}
答案 1 :(得分:0)
或者您实际上只能使用正则表达式:
var a = $("#async_TaskTypes").html();
if( /Whatever/g.test(a) ) {
//this string is present in your html
}
答案 2 :(得分:0)
更新Bergi的回答:
function updateTaskTypes(taskTypes) {
var $ul = $("#async_TaskTypes").empty();
$.each(taskTypes, function (idx, e) {
$ul.append(
$("<li>").append(
$("<href>", {id: "tab" + idx}).text(e)
);
);
});
}
也许更优雅一点。
答案 3 :(得分:0)
另一个想法:
var async_TaskTypes = $("#async_TaskTypes");
async_TaskTypes.append(
$.map(taskTypes, function (idx, e) {
if (!async_TaskTypes.has("a:contains('" + e + "')")) {
return $("<li>").append(
$("<href>", {id: "tab" + idx}).text(e)
);
}
})
);