[jquery] 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는 허용되지 않으며 일반적으로 구문 분석 오류가 발생합니다.

답변

중복을 찾는 또 다른 방법이지만 이것은 오류 클래스를 추가하므로 빨간색 텍스트가 표시됩니다.

// 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>');
}

답변

ES6로 다시 작성된 최상위 jQuery 답변 :

  [...document.querySelectorAll('[id]')].forEach(el => {
    const dups = document.querySelectorAll(`[id="${el.id}"]`);

    if (dups.length > 1 && dups[0] === el) {
      console.error(`Duplicate IDs #${el.id}`, ...dups);
    }
  });