JQuery для проверки дубликатов идентификаторов в DOM

Question

Я пишу приложения с ASP.NET MVC. В отличие от традиционного ASP.NET, вы несете гораздо большую ответственность за создание всех идентификаторов на сгенерированной странице. ASP.NET даст вам неприятные, но уникальные идентификаторы.

Я хотел бы добавить небольшой скрипт jQuery, чтобы проверить мой документ на наличие дубликатов идентификаторов. Это могут быть идентификаторы для DIVS, изображений, флажков, кнопок и т. Д.

<div id="pnlMain"> My main panel </div>
<div id="pnlMain"> Oops we accidentally used the same ID </div> 

Я ищу набор и забываю утилиту типа, которая просто предупредит меня, когда я сделаю что-то небрежное.

Да, я бы использовал это только во время тестирования, и альтернативы (такие как плагины firebug) тоже приветствуются.

Answer 1

Следующее будет записывать предупреждение на консоль:

// Warning Duplicate IDs
$('[id]').each(function(){
  var ids = $('[id="'+this.id+'"]');
  if(ids.length>1 && ids[0]==this)
    console.warn('Multiple IDs #'+this.id);
});

Answer 2

Эта версия несколько быстрее, и вы можете скопировать ее в кнопку закладки, чтобы сделать ее букмарклетом.

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

Answer 3

У меня большая страница, поэтому сценарий выполняется слишком медленно для завершения (несколько сообщений «продолжить сценарий»). Это отлично работает.

(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);
            }
        }
    }
}());

Answer 4

Вы должны попробовать HTML Validator (расширение Firefox). Это определенно скажет вам, что на странице есть повторяющиеся идентификаторы и многое другое.

Answer 5

Почему бы вам просто не проверить свой HTML?

Двойные идентификаторы не допускаются, и обычно вы получите ошибку синтаксического анализа.

Answer 6

Еще один способ поиска дубликатов, но это добавит класс ошибок, поэтому у него будет красный текст:

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

Answer 7

Вы можете использовать это решение, которое выведет на консоль список дубликатов, если таковые имеются.

Вы можете запустить код непосредственно в консоли (копировать / вставить) после загрузки 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)

Answer 8

Мне нравится это, потому что оно выплевывает фактические элементы на консоль. Это облегчает расследование происходящего.

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.";

}

Answer 9

Это может помочь Он оповестит все идентификаторы элементов с дубликатами.

<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>

Answer 10

Я создал функцию, в которой вы можете проверять конкретный элемент, ищущий дублированные идентификаторы внутри или на всей странице:

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