1

セレクターの使用に満足しておらず、特にセレクターのチェーンが長くなる場合に、他のセレクターでセレクターを再利用する方法がわかりません。

    $("#documents div div:last-child #element");

私はjqueryコードを書いています。こちらをご覧ください

HTML:

    <button type="button" id="adddNewFile">Add</button>
    <br>
    <div id="documents"></div>

JQuery:

$('#adddNewFile').click(function() {
    $("#documents").append("<div>");
    var d = $("#documents div:last-child");
    d.append('File '+$("#documents div").length+': <input type="file" name="file" id="file"/>');

    d.append('<button type="button" id="removeFile">Remove</button>');
    d.append('<br/>');


    $("#documents div:last-child #removeFile").click(function() {
        $(this).parent().remove();   
    });

   $('#documents').append(d);

});

上記のコードを修正して、現在次のように個別に行っているように、複数の jquery html 要素をシークしないようにするにはどうすればよいですか。

$('#documents')
$("#documents div:last-child
$("#documents div:last-child #removeFile")

これはパフォーマンスにとって最適ではありません。どうすれば修正できますか?

4

4 に答える 4

1

パフォーマンスの向上に役立つセレクターをキャッシュします。

ネストされたクリック イベントを削除し、イベント委任を使用して、動的に作成された要素のイベントをバインドします。

.findネストされた要素を使用しようとしている場合は、またはコンテキストを使用します。

要素インスタンスが HTML に複数回挿入される可能性があるため、 IDforの代わりに Class を使用します。removeFile代わりにクラスを使用してください。

$(function () {
    // Cache your selectors
    var $documents = $("#documents"),
        $lastChild = $("div:last-child", $documents);
    $('#adddNewFile').click(function () {
        $documents.append("<div>");
        $lastChild.append('File ' 
                          + $("div", $documents).length 
                          + ': <input type="file" name="file" id="file"/>');

        $lastChild.append('<button type="button" class="removeFile">Remove</button>');
        $lastChild.append('<br/>');
        $documents.append(d);
    });
    // Move the nested click event to the outside as it might bind the event
    // multiple times
    // Delegate the event as it is dynamically created element
    // Use a class instaed of ID as the latter has to be unique
    $documents.on('click', '.removeFile', function () {
        $(this).parent().remove();
    });
});
于 2013-09-05T17:42:34.290 に答える
0

変数に代入して使用します.find():

var $documents = $("#documents");
var $lastChild = $documents.find("div:last-child");
var $removeFile = $lastChild.find(".removeFile");

最後のものを探すように変更したことに注意してくださいclass="removeFile"。ID はドキュメント全体で一意である必要があり、各 DIV で繰り返すことはできません (<input>要素でもこれを修正する必要があります。おそらく ID やクラスはまったく必要ありません)。

delegationを使用して、行を追加するたびにこれを再バインドする必要を回避することもできます。

$(document).ready(function() {
    $("#documents").on("click", ".removeFile", function() {
        $(this).parent().remove();
    });
});
于 2013-09-05T17:42:59.053 に答える