1

I am not happy with my use of selectors and not sure how to reuse selectors in other selectors especially when the chain of selectors get long eg

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

我已经编写了 jquery 代码。看这里

html:

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

查询：

$('#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 
var
$documents  = $('#documents'),
$lastChild  = $documents.find("div:last-child"),
$removeFile = $lastChild.find("#removeFile"); // also $removeFile = $("#removeFile");
于 2013-09-05T17:38:35.327 回答
1

缓存您的选择器，这将有助于提高性能。

移除嵌套的点击事件并使用事件委托来绑定动态创建的元素的事件。

.find尝试使用嵌套元素时使用或上下文。

使用 Class 而不是IDfor，removeFile因为该元素实例可能会在 HTML 中多次插入。改用一个类。

$(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 或类）。

您还可以通过使用委托避免每次添加行时都需要重新绑定：

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

我就是这样写的，关键是你不需要附加到DOM来绑定事件，你可以在附加到DOM之前操作它

$('#adddNewFile').click(function() {
    //create a new element in memory
    var d = $("<div />");
    var i = $("#documents div").length + 1;

    d.append('File '+i+': <input type="file" name="file" id="file"/>');

    //create a button in memory
    var rmBtn = $("<button type=\"button\">Remove</button>");
    rmBtn.click(function() {
       $(this).parent().remove();   
    });
    d.append(rmBtn);
    d.append('<br/>');

    // Finally add to the DOM
    $("#documents").append(d);

});
于 2013-09-05T17:49:53.720 回答