DOM에서 중복 ID를 확인하는 JQuery
저는 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);
});
이 버전은 속도가 다소 빠르며 책갈피 단추에 복사하여 책갈피로 만들 수 있습니다.
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');
})();
페이지가 커서 스크립트가 너무 느리게 실행되어 완료할 수 없습니다(여러 "스크립트 계속" 메시지).이것은 잘 작동합니다.
(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);
}
}
}
}());
HTML Validator(Firefox 확장자)를 사용해 보십시오.페이지에 중복된 ID 등이 있다는 것을 확실히 알 수 있습니다.
그냥 당신의 html을 검증하는 게 어때요?
이중 ID는 허용되지 않으며 일반적으로 구문 분석 오류가 발생합니다.
ES6에서 다시 작성된 상위 jQuery 답변:
[...document.querySelectorAll('[id]')].forEach(el => {
const dups = document.querySelectorAll(`[id="${el.id}"]`);
if (dups[1] === el) {
console.error(`Duplicate IDs #${el.id}`, ...dups);
}
});
중복 항목을 찾는 또 다른 방법은 오류 클래스를 추가하여 빨간색 텍스트를 포함하는 것입니다.
// 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 목록이 있는 경우 콘솔에서 중복 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를 얻을 수 있습니다.
[...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
특정 요소를 검사하여 페이지 내 또는 전체에서 중복된 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
언급URL : https://stackoverflow.com/questions/482763/jquery-to-check-for-duplicate-ids-in-a-dom
'programing' 카테고리의 다른 글
| 세션의 기본 수명은 얼마입니까? (0) | 2023.08.24 |
|---|---|
| 도커 컨테이너 노드의 maridia db galera 클러스터 문제 (0) | 2023.08.19 |
| jQuery UI 대화 상자 위치 지정 (0) | 2023.08.19 |
| 일반 CSS 미디어 쿼리 중단점 (0) | 2023.08.19 |
| 스포츠 경기 시간 결과 포맷팅을 SQL로 처리하는 방법, 가급적이면 Maria.DB (0) | 2023.08.19 |