Javascript 更高效的jQuery版本包含

我有以下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);
        }
    });
}

我的问题是jQuery似乎没有它可能的那么高效。有没有办法使上述代码更有效

---

说到“高效”，我的意思是也许我可以使用更直接的jQuery函数，或者更干净的算法等等。。。基本上更优雅的代码。

或者您可以使用正则表达式：

var a = $("#async_TaskTypes").html();
if( /Whatever/g.test(a) ) {
  //this string is present in your html
}

---

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>");
    });
}

函数updateTaskTypes（任务类型）{
var$ul=$（“#异步_任务类型”），
text=$ul.find（“a”）.map（函数（）{
返回$（this.text（）；
}).get（）；
$.each（任务类型、函数（idx、e）{
如果（$.INARAY（文本，e）=-1）
$ul.追加（“
”）；
});
}

或者，您只需删除所有列表项，然后重新结束整个任务列表，对于短列表，这会更简单，甚至更快：

function updateTaskTypes(taskTypes) {
    var $ul = $("#async_TaskTypes").empty();
    $.each(taskTypes, function (idx, e) {
        $ul.append("<li><a href=\"#tab" + idx + "\">" + e + "</a></li>");
    });
}

函数updateTaskTypes（任务类型）{
var$ul=$（“#异步_任务类型”）.empty（）；
$.each（任务类型、函数（idx、e）{
$ul.追加（“
”）；
});
}

更新Bergi的答案：

function updateTaskTypes(taskTypes) {
    var $ul = $("#async_TaskTypes").empty();
    $.each(taskTypes, function (idx, e) { 
        $ul.append(
            $("<li>").append(
                $("<href>", {id: "tab" + idx}).text(e)
            );
        );
    });
}

函数updateTaskTypes（任务类型）{
var$ul=$（“#异步_任务类型”）.empty（）；
$.each（任务类型，函数（idx，e）{
$ul.append(
$（“
”）。追加(
$（“”，{id:“tab”+idx}）.text（e）
);
);
});
}

也许再优雅一点。

另一个想法：

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)
            );
        }
    })
);

var async_TaskTypes=$（“#async_TaskTypes”）；
async_TaskTypes.append(
$.map（任务类型、函数（idx、e）{
如果（！async_TaskTypes.has（“a:contains（“+e+”）”）））{
返回$（“
”）。追加(
$（“”，{id:“tab”+idx}）.text（e）
);
}
})
);

根本不清楚“高效”是什么意思。内存效率更高？cpu效率更高？还是更优雅的代码？@Philipp谢谢。我已经更新了我的问题，为什么不在li中添加一个任务类型的ID，而不是搜索文本。我想那会很慢。@Sylvanus:为什么？DOM只被查询一次，正则表达式速度很快。只是它可能不像

包含的
那样可靠，后者通过单个元素的
文本（）
进行搜索。因为它搜索整个“异步”任务类型的内部文本，而不仅仅是元素。@Sylvanus:但是
元素之外没有多少文本，是吗？当然，您可以将其范围缩小到
$.map（$（“#async_TaskTypes a”）、function（）{return$（this）.text（））））.join（“\n”）
如果这样做，您应该使用
.text（）
而不是
.html（）
。如果希望列表始终反映
任务类型的顺序，这是很好的（或某些自定义排序）。但是，如果您希望新引入的项始终显示在列表的末尾（而自定义排序无法完成此任务），则需要另一种方法（例如，如问题中所述，或通过维护一个具有适当键控的布尔js对象并使用它进行查找）@Beetroot:没错。由于数组中的索引被用作标识符，所以我就预料到了这一点，但对于另一种可能性，我也添加了一个脚本（虽然没有一个奇特的hashmap:-）在这个脚本上有这么多变体，OP的问题是选择太多了！
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)
            );
        }
    })
);