ASP.NET MVC로 응용 프로그램을 작성하고 있습니다. 기존 ASP.NET과 달리 생성 된 페이지에서 모든 ID를 만드는 데 훨씬 더 많은 책임이 있습니다. ASP.NET은 불쾌하지만 고유 한 ID를 제공합니다.
내 문서에서 중복 ID를 확인하기 위해 간단한 jQuery 스크립트를 추가하고 싶습니다. DIVS, 이미지, 체크 박스, 버튼 등의 ID 일 수 있습니다.
<div id="pnlMain"> My main panel </div>
<div id="pnlMain"> Oops we accidentally used the same ID </div>
나는 부주의 한 일을 할 때 나에게 경고 할 세트를 찾고 있고 유형 유틸리티를 잊어 버립니다.
예, 테스트 중에 만 이것을 사용하고 있으며 대안 (예 : 방화 버그 플러그인)도 환영합니다.
답변:
다음은 콘솔에 경고를 기록합니다.
// 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']")콘솔에서 XPath 표현식 ( )을 사용하여 중복 된 ID가있는 요소를 쿼리했습니다.
HTML Validator (Firefox 확장)를 시도해야합니다 . 페이지에 중복 ID 등이 있음을 분명히 알려줍니다.
HTML의 유효성을 검사하지 않는 이유는 무엇입니까?
이중 ID는 허용되지 않으며 일반적으로 구문 분석 오류가 발생합니다.
중복을 찾는 또 다른 방법이지만 이것은 오류 클래스를 추가하므로 빨간색 텍스트가 표시됩니다.
// 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