如何在其他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選擇器

回答

相關問題