Question

我有以下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函数，或者更简洁的算法等......基本上更优雅的代码。

Answer 1

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

Answer 2

或者您实际上只能使用正则表达式：

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

Answer 3

更新Bergi的回答：

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

也许更优雅一点。

Answer 4

另一个想法：

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

一个更高效的jQuery版本包含

4 个答案: