如何在其他jQuery选择器中重用jquery选择器

我对使用选择器并不确定如何在其他选择器中重用选择器，特别是当选择器链变长时如何在其他jQuery选择器中重用jquery选择器

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

我写过jQuery代码。见here

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

这不是最佳的性能。我如何纠正它？

来源

2013-09-05 greay

只是一个供参考，如果该元素具有一个ID（其中** **必须是唯一的），刚刚那目标身份证，不需要走下祖先线。 – tymeJV

将$（“＃documents div：last-child #removeFile”）更改为$（“＃removeFile”）。另一个很好。 –

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

删除嵌套的单击事件并使用事件委托为动态创建的元素绑定事件。当您尝试使用嵌套元素时，使用.find或上下文。

对于removeFile使用类而不是ID，因为该元素实例可能会在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-05 17:42:34

+1，但正如一个额外的注释'$（父）.find（child）'显示比$（child，parent）'更快' – Archer

click事件不会被触发。任何想法为什么？ – greay

检查浏览器控制台中的任何错误 –

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

来源

2013-09-05 17:38:35 aletzo

的变量赋值，并使用.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-05 17:42:59 Barmar

这是我会怎么写，关键是，你不需要附加到事件绑定到它的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-05 17:49:53

如何在其他jQuery选择器中重用jquery选择器

回答

相关问题