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

хе-хе, і я переключився на консоль. Попереджаю попереджати (...), тому я

— маю

знайшли це надзвичайно корисним та цінним. я думаю, що це повинно бути стандартом у структурах - особливо під час налагодження

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

— Веселий
джерело

3

Цей алгоритм є кращим, вимагає лише одного обходу дому замість одного на один відповідний елемент. Повинна бути прийнята відповідь.

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

було б краще.

— альпо

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

Я постійно працюю над комбінуванням сценаріїв у різних конфігураціях, і це, безумовно, мені дуже допоможе. Дякую :)

— Andy Gee

+1 для простого рішення JavaScript. Після знаходження дублюваних ідентифікаторів я використав вираз XPath ( $x("//*[@id='duplicated-id']")) в консолі для запиту елементів із дублюються ідентифікаторами.

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

12

Спробуйте спробувати HTML Validator (розширення Firefox). Це обов'язково скаже вам, що на сторінці є копії ідентифікаторів та багато іншого.

— Ionuț G. Stan
джерело

8

Чому ви просто не перевірите свій html?

Подвійні ідентифікатори заборонені, і зазвичай ви отримаєте помилку розбору.

— Натрій
джерело

2

які варіанти для цього є?

— Simon_Weaver

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

— IEnumerator

4

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

— гідо

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.

— Жизель Серате

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тегу)

— GibboK
джерело

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
джерело