0

完全に機能する次の 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>toを追加することです。#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 関数や、よりクリーンなアルゴリズムなどがあることを意味します...基本的にはよりエレガントなコードです。

4

4 に答える 4

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>");
    });
}
于 2013-03-10T16:08:05.740 に答える
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)
            );
        }
    })
);
于 2013-03-10T16:39:47.443 に答える
0

または、実際に正規表現を使用することもできます。

var a = $("#async_TaskTypes").html();
if( /Whatever/g.test(a) ) {
  //this string is present in your html
}
于 2013-03-10T16:08:01.197 に答える
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)
            );
        );
    });
}

もう少しエレガントかもしれません。

于 2013-03-10T16:20:59.170 に答える