একটি ডিওমে সদৃশ আইডির জন্য জিকুয়েরি

Question

আমি এএসপি.এনইটি এমভিসির সাথে অ্যাপ্লিকেশন লিখছি। Traditionalতিহ্যবাহী ASP.NET এর বিপরীতে আপনি আপনার উত্পন্ন পৃষ্ঠায় সমস্ত আইডি তৈরির জন্য আরও অনেক বেশি দায়বদ্ধ। এএসপি.এনইটি আপনাকে কদর্য, তবে অনন্য আইডি দেবে।

আমি নকল আইডির জন্য আমার দস্তাবেজটি পরীক্ষা করতে একটি দ্রুত ছোট jQuery স্ক্রিপ্ট যুক্ত করতে চাই। এগুলি ডিআইভিএস, চিত্র, চেকবক্স, বোতাম ইত্যাদির জন্য আইডি হতে পারে

<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

পারফেক্ট! ধন্যবাদ! ইতিমধ্যে আমার কাছে নকল আইডি রয়েছে এমন তিনটি জায়গা আবিষ্কার করেছে। এটি আমাকে সামান্য হতাশ করেছে যে বেশিরভাগ লোকের সমস্যার সমাধানটি হ'ল 'ফায়ারব্যাগ' বা 'এইচটিএমএল যাচাইকারী' ব্যবহার করা। যথেষ্ট ভাল না! আমি জঘন্য পরিস্থিতিতে অপ্রত্যাশিত নকলগুলি ধরতে চাই।

— সাইমন_উইভার

তিনি এবং আমি

— কনসোলটি

এটি অত্যন্ত কার্যকর এবং মূল্যবান বলে মনে হয়েছে। আমার মনে হয় এটি ফ্রেমওয়ার্কগুলির একটি মানক হওয়া উচিত - বিশেষত ডিবাগিংয়ের সময়

— সাইমন_উইভার

এটি কাজ করার জন্য প্রয়োজনীয় ডিওএম ট্র্যাভারসেলের পরিমাণটি বেশ অবাক করা

— জোশ স্টোডোলা

খুব সুন্দর সমাধান তবে এটির জন্য অতিরিক্ত উদ্ধৃতি প্রয়োজন 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

এই অ্যালগরিদম আরও ভাল, প্রতি ম্যাচিং উপাদানের পরিবর্তে একটি মাত্র ডোম ট্র্যাভারসাল প্রয়োজন। গ্রহণযোগ্য উত্তর হওয়া উচিত।

— এম_এক্স

এটি ফর্মগুলির জন্য মিথ্যা ইতিবাচক দেয় যা নাম = আইডি সহ ইনপুট রয়েছে। 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'); })(); ভালো হবে.

— অলপ

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']")সাহায্যে উপাদানগুলির অনুসন্ধানের জন্য আমি কনসোলে একটি এক্সপথ এক্সপ্রেশন ( ) ব্যবহার করেছি ।

— cassiomolin

Answer 4

আপনার এইচটিএমএল ভ্যালিডেটর (ফায়ারফক্স এক্সটেনশন) চেষ্টা করা উচিত । এটি অবশ্যই আপনাকে জানিয়ে দেবে পৃষ্ঠায় সদৃশ আইডিসহ আরও অনেক কিছু রয়েছে।

Answer 5

কেন আপনি কেবল আপনার এইচটিএমএলকে বৈধতা দিচ্ছেন না?

ডাবল আইডি অনুমোদিত নয় এবং সাধারণত আপনি একটি বিশ্লেষণ ত্রুটি পাবেন।

Comments

এর জন্য কি বিকল্প আছে?

— সাইমন_উইভার

এফএফ-তে, ওয়েব ডেভেলপার সরঞ্জামদণ্ডটি এমন সরঞ্জামগুলির অধীনে ব্যবহার করুন যার বৈধতা রয়েছে

— IEnumerator

Jquery ui থেকে ডায়লগের মতো উইজেটগুলির সাথে কাজ করার সময় এটি প্রায়শই ঘটে থাকে যে ডায়লগগুলি তৈরি করার পরে পরিষ্কার না করার সময় আপনি ডম-এ ডুপ্লিটদের সাথে শেষ করেন।

— গাইড

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

এই ফাংশনটি অত্যন্ত সহায়ক ছিল যেখানে প্রস্তাবিত ক্রোম এক্সটেনশন এইচটিএমএল যাচাইকারী আমার পক্ষে কাজ করে না, কারণ পৃষ্ঠায় নতুন এইচটিএমএল যুক্ত হওয়ার পরে এটি প্রতিলিপিযুক্ত আইডি সনাক্ত করতে সক্ষম হয়েছিল।

— গিজেল সেরেট

Answer 10

আপনি এই সমাধানটি ব্যবহার করতে পারেন যা কোনও উপস্থিত থাকলে সদৃশ আইডির একটি তালিকা কনসোলে মুদ্রণ করবে।

আপনার ডিওএম লোড হওয়ার পরে এবং সরাসরি 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