我正在使用 ASP.NET MVC 编写应用程序。与传统的 ASP.NET 相比，您更需要负责在生成的页面中创建所有 id。 ASP.NET 会给您提供令人讨厌但唯一的 ID。
我想添加一个快速的小 jQuery 脚本来检查我的文档是否有重复的 ID。它们可能是 DIVS、图像、复选框、按钮等的 id。
<div id="pnlMain"> My main panel </div>
<div id="pnlMain"> Oops we accidentally used the same ID </div>
我正在寻找一个 set and forget type 实用程序，它会在我做某事时发出警告。
是的，我只会在测试期间使用它，也欢迎替代品（例如 firebug 插件）。
【问题讨论】：
以下将向控制台记录警告：
// Warning Duplicate IDs
$('[id]').each(function(){
var ids = $('[id="'+this.id+'"]');
if(ids.length>1 && ids[0]==this)
console.warn('Multiple IDs #'+this.id);
});
【讨论】：
var ids = $('[id=\''+this.id+'\']'); 中加上额外的引号，因此它适用于 ID 中的点和其他奇怪的东西。
这个版本比较快，你可以把它复制到一个书签按钮，做成一个小书签。
javascript:(function () {
var ids = {};
var found = false;
$('[id]').each(function() {
if (this.id && ids[this.id]) {
found = true;
console.warn('Duplicate ID #'+this.id);
}
ids[this.id] = 1;
});
if (!found) console.log('No duplicate IDs found');
})();
【讨论】：
javascript:(function () { var ids = {}; var found = false; $('[id]').each(function() { var id = this.getAttribute('id'); if (id && ids[id]) { found = true; console.warn('Duplicate ID #'+id); } ids[id] = 1; }); if (!found) console.log('No duplicate IDs found'); })(); 会更好。
我的页面很大，因此脚本运行速度太慢而无法完成（多个“继续脚本”消息）。这很好用。
(function () {
var elms = document.getElementsByTagName("*"), i, len, ids = {}, id;
for (i = 0, len = elms.length; i < len; i += 1) {
id = elms[i].id || null;
if (id) {
ids[id] = ids.hasOwnProperty(id) ? ids[id] +=1 : 0;
}
}
for (id in ids) {
if (ids.hasOwnProperty(id)) {
if (ids[id]) {
console.warn("Multiple IDs #" + id);
}
}
}
}());
【讨论】：
$x("//*[@id='duplicated-id']")) 来查询具有重复 id 的元素。
您应该尝试HTML Validator（Firefox 扩展）。它肯定会告诉您该页面有重复的 id 等等。
【讨论】：
你为什么不验证你的 html？
不允许使用双 ID，通常会出现解析错误。
【讨论】：
顶级 jQuery 答案，用 ES6 重写：
[...document.querySelectorAll('[id]')].forEach(el => {
const dups = document.querySelectorAll(`[id="${el.id}"]`);
if (dups[1] === el) {
console.error(`Duplicate IDs #${el.id}`, ...dups);
}
});
【讨论】：
if (dups[1] === el)
另一种定位重复项的方法，但这会添加一类错误，因此它会显示红色文本：
// waits for document load then highlights any duplicate element id's
$(function(){ highlight_duplicates();});
function highlight_duplicates() {
// add errors when duplicate element id's exist
$('[id]').each(function(){ // iterate all id's on the page
var elements_with_specified_id = $('[id='+this.id+']');
if(elements_with_specified_id.length>1){
elements_with_specified_id.addClass('error');
}
});
// update flash area when warning or errors are present
var number_of_errors = $('.error').length;
if(number_of_errors > 0)
$('#notice').append('<p class="error">The '+number_of_errors+
' items below in Red have identical ids. Please remove one of the items from its associated report!</p>');
}
【讨论】：
这可能会奏效 它会提醒所有重复元素的 id。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
function findDupes()
{
var all = $("*");
for(var i = 0; i < all.length; i++)
{
if (all[i].id.length > 0 && $("[id='" + all[i].id + "']").length > 1) alert(all[i].id);
}
}
</script>
</head>
<body onload="findDupes()">
<div id="s"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="d"></div>
<div id="j"></div>
<div id="k"></div>
<div id="l"></div>
<div id="d"></div>
<div id="e"></div>
</body>
</html>【讨论】：
我喜欢这个，因为它将实际元素吐出到控制台。它使调查发生的事情变得更加容易。
function CheckForDuplicateIds() {
var ids = {};
var duplicates = [];
$("[id]").each(function() {
var thisId = $(this).attr("id");
if (ids[thisId] == null) {
ids[thisId] = true;
} else {
if (ids[thisId] == true) {
duplicates.push(thisId);
ids[thisId] = false;
}
}
});
if (duplicates.length > 0) {
console.log("=======================================================");
console.log("The following " + duplicates.length + " ids are used by multiple DOM elements:");
console.log("=======================================================");
$(duplicates).each(function() {
console.warn("Elements with an id of " + this + ":");
$("[id='" + this + "']").each(function() {
console.log(this);
});
console.log("");
});
} else {
console.log("No duplicate ids were found.");
}
return "Duplicate ID check complete.";
}
【讨论】：
您可以使用此解决方案，该解决方案将在控制台中打印出重复 ID 列表（如果存在）。
你可以在加载DOM后直接在控制台中运行代码（复制/粘贴），不需要像jQuery这样的额外依赖。
您可以使用它快速找出 HTML 标记中可能存在的错误。
(function (document) {
var elms = document.body.querySelectorAll('*[id]'),
ids = [];
for (var i = 0, len = elms.length; i < len; i++) {
if (ids.indexOf(elms[i].id) === -1) {
ids.push(elms[i].id);
} else {
console.log('Multiple IDs #' + elms[i].id);
}
}
})(document);
一个例子：
https://jsbin.com/cigusegube/edit?html,console,output
（此处代码是在关闭body标签之前添加的）
【讨论】：
我创建了一个函数，您可以在其中检查特定元素，以在页面内或整个页面中搜索重复的 id：
function duplicatedIDs(container) {
var $container = container ? $(container) : $('body'),
elements = {},
duplicatedIDs = 0;
totalIDs = 0;
$container.find('[ID]').each(function(){
var element = this;
if(elements[element.id]){
elements[element.id].push(element);
} else {
elements[element.id] = [element];
}
totalIDs += 1;
});
for( var k in elements ){
if(elements[k].length > 1){
console.warn('######################################')
console.warn(' ' + k )
console.warn('######################################')
console.log(elements[k]);
console.log('---------------------------------------');
duplicatedIDs += elements[k].length
}
}
console.info('totalIDs', totalIDs);
console.error('duplicatedIDs', duplicatedIDs);
}
duplicatedIDs('#element'); //find duplicated ids under that element
duplicatedIDs(); // entire page
【讨论】：
我们可以直接将下面的脚本粘贴到浏览器控制台来获取重复的ID
[...document.querySelectorAll('[id]')].filter(el => [...document.querySelectorAll('[id]')].map(el => el.id).filter(id => id === el.id).length > 1);
参考：https://www.abeautifulsite.net/getting-duplicate-ids-in-an-html-document
【讨论】：