डोम में डुप्लिकेट आईडी की जांच करने के लिए JQuery

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> 

मैं एक सेट की तलाश कर रहा हूं और टाइप उपयोगिता भूल गया हूं, जब मैं कुछ लापरवाह होऊंगा तो मुझे चेतावनी दूंगा।

हां, मैं इसे केवल परीक्षण के दौरान उपयोग करूंगा, और विकल्प (जैसे फ़ायरबग प्लगइन्स) का भी स्वागत है।

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

Comments

उत्तम! धन्यवाद! पहले से ही तीन स्थानों की खोज की जहां मेरे पास डुप्लिकेट आईडी हैं। यह मुझे थोड़ा निराश करता है कि इस समस्या का अधिकांश लोगों का समाधान 'फायरबग' या 'html सत्यापनकर्ता' का उपयोग करना है। यह पर्याप्त अच्छा नहीं है! मैं अजीब स्थितियों में अप्रत्याशित डुप्लिकेट को पकड़ना चाहता हूं।

— सिमोन_विवर

hehe और मैंने कंसोल को बंद कर दिया है। चेतावनी के लिए (...) तो मुझे उन्हें ठीक करना है :)

— Simon_Wver

यह अत्यंत उपयोगी और मूल्यवान है। मुझे लगता है कि इसे फ्रेमवर्क में एक मानक होना चाहिए - विशेष रूप से डिबगिंग के दौरान

— सिमोन_विवर

काम करने के लिए इसके लिए आवश्यक डोम ट्रैवर्सल्स की मात्रा बहुत आश्चर्यजनक है

— जोश स्टोडोला

बहुत अच्छा समाधान है, लेकिन इसमें अतिरिक्त उद्धरणों की आवश्यकता है var ids = $('[id=\''+this.id+'\']');ताकि यह आईडी में डॉट्स और अन्य अजीब चीजों के साथ काम करे।

— zidarsk8

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

Comments

यह एल्गोरिथ्म बेहतर है, प्रति मिलान किए गए तत्व के बजाय केवल एक डोम ट्रैवर्सल की आवश्यकता होती है। स्वीकृत उत्तर होना चाहिए।

— m_x

यह उन रूपों के लिए गलत सकारात्मक देता है जिनके पास नाम = आईडी के साथ इनपुट है। 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

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

Comments

महान! धन्यवाद। मैं अक्सर भूल जाता हूं कि मेरे पास यह उत्पादन में चल रहा है और वास्तव में इसे अब तक अनुकूलित करना चाहिए - या इसे चालू / बंद करने के लिए डीबग सेटिंग जोड़ें!

— सिमोन_विवर

मैं अलग-अलग कॉन्फ़िगरेशन में स्क्रिप्ट के संयोजन पर लगातार काम कर रहा हूं और यह निश्चित रूप से मुझे बहुत मदद करेगा। धन्यवाद :)

— एंडी जी

सादे जावास्क्रिप्ट समाधान के लिए +1। डुप्लिकेट आईडी खोजने के बाद, मैंने $x("//*[@id='duplicated-id']")कंसोल में एक्सपीथ एक्सप्रेशन ( ) का उपयोग डुप्लिकेट आईडी के साथ तत्वों को क्वेरी करने के लिए किया।

— कैसियोमोलिन

Answer 4

आपको HTML Validator (फ़ायरफ़ॉक्स एक्सटेंशन) आज़माना चाहिए । यह निश्चित रूप से आपको बताएगा कि पृष्ठ में डुप्लिकेट आईडी और बहुत कुछ है।

Answer 5

आप केवल अपने HTML को मान्य क्यों नहीं करते?

डबल आईडी की अनुमति नहीं है, और आम तौर पर आपको एक पार्स-त्रुटि मिलेगी।

Comments

इसके लिए क्या विकल्प हैं?

— सिमोन_विवर

FF में भी, वेब डेवलपर टूलबार का उपयोग उन टूल्स के तहत करें, जिनमें वेरिएंट हैं

— IEnumerator

जब jquery ui से संवाद जैसे विगेट्स के साथ काम करना अक्सर ऐसा होता है कि आप DOM में डुप्लिकेट के साथ समाप्त होते हैं जब संवाद बनाने के बाद सफाई नहीं करते हैं।

— गाइड

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

Comments

थोड़े शांत! धन्यवाद। मैं वास्तव में मूल स्वीकार्य उत्तर अमूल्य पाया है। इतनी सारी चीजें पकड़ीं और शायद घंटों का समय बचा लिया!

— सिमोन_विवर

कूल, लेकिन क्यों न केवल कंसोल फ़ंक्शन का उपयोग करें और उन्हें आराम करने दें? तर्क और प्रस्तुति आदि का अलग होना ...

— विल मॉर्गन

Answer 7

शीर्ष 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);
    }
  });

Answer 8

यह चाल कर सकता है यह डुप्लिकेट के साथ तत्वों के सभी आईडी को सचेत करेगा।

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

मुझे यह पसंद है क्योंकि यह कंसोल के लिए वास्तविक तत्वों को बाहर निकालता है। यह जांचना आसान बनाता है कि क्या हो रहा है।

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

}

Comments

यह फ़ंक्शन बेहद मददगार था, जहां सुझाए गए Chrome एक्सटेंशन HTML सत्यापनकर्ता ने मेरे लिए काम नहीं किया, क्योंकि जब पृष्ठ पर नया HTML जोड़ा गया था, तो वह प्रतिकृति आईडी का पता लगाने में सक्षम था।

— गिजेल सेरेट

Answer 10

आप इस समाधान का उपयोग कर सकते हैं जो किसी भी मौजूद होने पर डुप्लिकेट आईडी की एक सूची कंसोल में प्रिंट करेगा।

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 11

मैंने एक समारोह बनाया है जहाँ आप एक विशेष रूप से तत्व की खोज कर सकते हैं जो भीतर या पूरे पृष्ठ पर डुप्लिकेट आईडी के लिए खोज कर रहा है:

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