JQuery для проверки повторяющихся идентификаторов в DOM

106

Я пишу приложения с 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) тоже приветствуются.

jquery dom

— Simon_Weaver
источник

214

На консоль выводится предупреждение:

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

— Sunsean
источник

идеальный! Спасибо! уже обнаружил три места, где у меня есть повторяющиеся идентификаторы. меня немного расстраивает, что большинство людей решает эту проблему с помощью firebug или html validator. этого недостаточно! Я хочу ловить неожиданные дубликаты в сложных ситуациях.

— Simon_Weaver

4

хехе и я переключили console.warn на alert (...), так что я

— ДОЛЖЕН

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

— Simon_Weaver

6

Количество обходов DOM, необходимых для того, чтобы это работало, просто поразительно

— Джош Стодола

8

Очень хорошее решение, но для этого нужны дополнительные кавычки, var ids = $('[id=\''+this.id+'\']');поэтому оно работает с точками и другими странностями в идентификаторах.

— zidarsk8

33

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

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

— Sjoerd
источник

3

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

— m_x

1

Это дает ложное срабатывание для форм, которые имеют ввод с именем = id.

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

было бы лучше.

— alpo 08

14

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

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

— AutoSponge
источник

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

— Simon_Weaver

Я постоянно работаю над объединением скриптов в разных конфигурациях, и это, безусловно, мне очень поможет. Спасибо :)

— Энди Джи

+1 за простое решение JavaScript. Найдя повторяющиеся идентификаторы, я использовал выражение XPath ( $x("//*[@id='duplicated-id']")) в консоли для запроса элементов с повторяющимися идентификаторами.

— кассиомолин

12

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

— Ионуй Г. Стан
источник

8

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

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

— Натриум
источник

2

какие есть варианты для этого?

— Simon_Weaver

Также в FF используйте панель инструментов веб-разработчика под инструментами, в которых есть валидаторы

— IEnumerator

4

При работе с виджетами, такими как диалог из jquery ui, часто случается, что вы получаете дубликаты в DOM, когда не выполняете очистку после создания диалогов.

— guido

4

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

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

— Джошавен Поттер
источник

это круто! Спасибо. Я действительно нашел бесценным исходный принятый ответ. поймал так много вещей и сэкономил, наверное, часы времени!

— Simon_Weaver

Круто, но почему бы просто не использовать функции консоли, а позволить им сделать все остальное? Разделение логики и презентации и т. Д. И т. Д.

— Уилл Морган,

3

Главный ответ jQuery, переписанный на ES6:

  [...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);
    }
  });

— Рафи
источник

2

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

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

Развернуть фрагмент

— Сайед мохамед аладин
источник

1

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

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

}

— Бертон
источник

Эта функция была чрезвычайно полезной, когда предлагаемый HTML-валидатор расширения Chrome не работал у меня, потому что он мог обнаруживать реплицированные идентификаторы при добавлении нового HTML-кода на страницу.

— Giselle Serate

1

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

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

— Гиббок
источник

0

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

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

— Diegodafm
источник