JQuery untuk memeriksa id duplikat di DOM

106

Saya sedang menulis aplikasi dengan ASP.NET MVC. Berbeda dengan ASP.NET tradisional, Anda lebih bertanggung jawab untuk membuat semua id di halaman yang Anda buat. ASP.NET akan memberi Anda id yang buruk, tetapi unik.

Saya ingin menambahkan sedikit skrip jQuery untuk memeriksa dokumen saya untuk id duplikat. Mereka mungkin id untuk DIVS, gambar, kotak centang, tombol, dll.

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

Saya mencari satu set dan lupakan jenis utilitas yang hanya akan memperingatkan saya ketika saya melakukan sesuatu yang ceroboh.

Ya, saya akan menggunakan ini hanya selama pengujian, dan alternatif (seperti plugin firebug) juga diterima.

jquery  dom 
— Simon_Weaver
sumber

Jawaban:

214

Berikut ini akan mencatat peringatan ke konsol:

// 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
sumber
sempurna! Terima kasih! sudah menemukan tiga tempat di mana saya memiliki ID duplikat. Ini sedikit membuat saya frustrasi karena kebanyakan solusi orang untuk masalah ini adalah dengan menggunakan 'firebug' atau 'validator html'. itu tidak cukup bagus! saya ingin menangkap duplikat yang tidak terduga dalam situasi yang aneh.
— Simon_Weaver
4
hehe dan saya beralih console.warn ke alert (...) jadi saya HARUS memperbaikinya :)
— Simon_Weaver
merasa ini sangat berguna dan berharga. saya pikir itu harus menjadi standar dalam kerangka kerja - terutama selama debugging
— Simon_Weaver
6
Jumlah traversal DOM yang diperlukan agar ini berfungsi cukup mencengangkan
— Josh Stodola
8
Solusi yang sangat bagus tetapi membutuhkan tanda kutip ekstra var ids = $('[id=\''+this.id+'\']');sehingga berfungsi dengan titik dan hal-hal aneh lainnya di ID.
— zidarsk8
33

Versi ini agak lebih cepat, dan Anda dapat menyalinnya ke tombol bookmark untuk menjadikannya bookmarklet.

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
sumber
3
Algoritme ini lebih baik, hanya membutuhkan satu dom traversal daripada satu per elemen yang cocok. Harus menjadi jawaban yang diterima.
— m_x
1
Ini memberikan positif palsu untuk formulir yang memiliki input dengan name = 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'); })(); akan lebih baik.
— alpo
14

Saya memiliki halaman yang besar, sehingga skrip berjalan terlalu lambat untuk diselesaikan (beberapa pesan "lanjutkan skrip"). Ini bekerja dengan baik.

(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
sumber
Bagus! Terima kasih. saya sering lupa saya menjalankan ini dalam produksi dan benar-benar harus mengoptimalkannya sekarang - atau menambahkan pengaturan debug untuk mengaktifkan / menonaktifkannya!
— Simon_Weaver
Saya terus bekerja untuk menggabungkan skrip dalam konfigurasi yang berbeda dan ini pasti akan banyak membantu saya. Terima kasih :)
— Andy Gee
1 untuk solusi JavaScript biasa. Setelah menemukan id duplikat, saya menggunakan ekspresi XPath ( $x("//*[@id='duplicated-id']")) di konsol untuk menanyakan elemen dengan id duplikat.
— cassiomolin
8

Mengapa Anda tidak memvalidasi html Anda saja?

Double ID tidak diperbolehkan, dan biasanya Anda akan mendapatkan error parse.

— Natrium
sumber
2
pilihan apa yang ada untuk ini?
— Simon_Weaver
Juga di FF, gunakan toolbar pengembang web di bawah alat yang memiliki validator
— IEnumerator
4
Saat bekerja dengan widget seperti dialog dari jquery ui sering terjadi bahwa Anda berakhir dengan duplikat di DOM ketika tidak membersihkan setelah membuat dialog.
— guido
4

Cara lain untuk menemukan duplikat tetapi ini akan menambah kelas kesalahan sehingga akan memiliki teks merah:

// 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>');
}
— Joshaven Potter
sumber
itu keren! Terima kasih. Saya benar-benar menemukan jawaban asli yang diterima sangat berharga. menangkap begitu banyak hal dan menghemat waktu berjam-jam!
— Simon_Weaver
Keren, tapi mengapa tidak menggunakan fungsi konsol dan membiarkan mereka melakukan sisanya? Pemisahan logika dan presentasi dll ...
— Will Morgan
3

Jawaban jQuery teratas, ditulis ulang di 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);
    }
  });
— Rafi
sumber
2

Ini mungkin melakukan trik Ini akan mengingatkan semua id elemen dengan duplikat.

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

— Syed mohamed aladeen
sumber
1

Saya suka ini karena ini memuntahkan elemen sebenarnya ke konsol. Ini memudahkan untuk menyelidiki apa yang sedang terjadi.

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

}

— Burton
sumber
Fungsi ini sangat membantu jika validator HTML ekstensi Chrome yang disarankan tidak berfungsi untuk saya, karena dapat mendeteksi id yang direplikasi saat HTML baru ditambahkan ke halaman.
— Giselle Serate
1

Anda dapat menggunakan solusi ini yang akan mencetak di konsol daftar id duplikat jika ada.

Anda dapat menjalankan kode secara langsung di konsol (salin / tempel) setelah DOM Anda dimuat dan tidak memerlukan ketergantungan tambahan seperti jQuery.

Anda dapat menggunakannya untuk menemukan dengan cepat kemungkinan kesalahan dalam markup HTML Anda.

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

Sebuah contoh:

https://jsbin.com/cigusegube/edit?html,console,output

(di sini kode ditambahkan sebelum menutup bodytag)

— GibboK
sumber
0

Saya telah membuat fungsi di mana Anda dapat memeriksa elemen khusus yang mencari id duplikat di dalam atau seluruh halaman:

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
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.