當多個元素具有相同的id時如何輸出錯誤？

Question

因為我對div，span和輸入沒有嚴格的命名約定，所以我經常不小心給多個輸入相同的id，這當然會導致jQuery / javascript代碼無法正常工作。

不允許為多個元素提供相同的ID，但是發生這種情況時，我在任何地方都看不到任何錯誤消息，因此，當我這樣做時，有時會花很長時間才能意識到我做了什么。

有什么方法可以知道何時多個元素具有相同的ID？

Answer 1

這將是您要一次又一次地編寫HTML來學習的標准實踐！ 避免使用重復ID的好方法是使用較少的ID，並可能在其位置使用類。

僅使用ID對您網站的重要/結構元素，如#header ， #footer ， #main ， #slideshow ， #content ， #sidebar等。

如果您要在頁面上一遍又一遍地重復ID，則可能應該使用類。 應該使用一個類來標識將要多次重復使用的任何元素/樣式化模塊。

另外，某些IDE會執行一些特殊的語法高亮顯示/文本修飾，以使您知道有些時髦。 立即想到的兩個是SublimeText2和Visual Studio。

這是一個jQuery代碼段，您可以運行該代碼段來檢查頁面上是否有重復的ID。 如果頁面上有任何重復項，它將在控制台（F12開發人員工具/ Firebug）中通知您。

(function () {  
    var found = false;  
    $('[id]').each(function () {  
        var ids = $('[id=' + this.id + ']');  
        if (ids.length > 1 && ids[0] === this) {  
            console.warn('ID used more than once: ' + this.id, ids);  
            found = true;  
        }  
    });  
    if (!found) {  
        console.log('No duplicate IDs found');  
    }  
})();  

您可以將其放在全局頁腳中，以使其在每個頁面上運行，只需確保在生產之前將其取出即可。

這是一個JSFiddle： http : //jsfiddle.net/A7h75/

從這里得到腳本 。

Answer 2

一個好的IDE將為您抓住這一點。 我使用Zend Studio（本質上是Eclipse的PHP特定版本），在您編寫代碼時，它將為您效勞。 大約可以盡快抓住它。

Answer 3

您可以通過W3C驗證程序服務檢查您的HTML是否有效

這將向您顯示HTML中的所有錯誤，並且建議您僅檢查HTML中是否存在可能導致跨瀏覽器呈現問題的錯誤，否則建議這樣做。

Firefox和Chrome瀏覽器有各種擴展名，無需您手動訪問Validator服務即可檢查HTML。

Answer 4

您可以利用此功能檢查重復項

function getDuplicateIds(){
    var dups = [];
    $('[id]').each(function(){
        if($('[id="'+$(this).attr('id')+'"]').length > 1) dups.push($(this).attr('id'));
    })
    return $.unique(dups);
}

Answer 5

無法為此打開錯誤，但是在特定情況下：

$('[id={elementId}]').length > 1

應該可以。

編輯：感謝您的更正。