web-dev-qa-db-ja.com

DOMで重複IDをチェックするJQuery

ASP.NET MVCを使用してアプリケーションを作成しています。従来のASP.NETとは対照的に、生成されたページにすべてのIDを作成する責任ははるかに大きくなります。 ASP.NETは、厄介な、しかしユニークなIDを提供します。

ドキュメントの重複IDをチェックするために、簡単な小さなjQueryスクリプトを追加したいと思います。 DIVS、画像、チェックボックス、ボタンなどのIDです。

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

私はセットを探していますが、不注意なことをすると警告するタイプのユーティリティを忘れています。

はい、テスト中にのみこれを使用しますが、代替手段（firebugプラグインなど）も歓迎します。

jquerydom
98
Simon_Weaver

以下は、コンソールに警告を記録します。

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

このバージョンはやや高速であり、ブックマークボタンにコピーしてブックマークレットにすることができます。

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

大きなページがあるので、スクリプトの実行が遅すぎて終了できません（複数の「スクリプトの継続」メッセージ）。これは正常に機能します。

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

HTML Validator （Firefox拡張機能）を試してください。ページに重複したIDなどが確実に表示されます。

12
Ionuț G. Stan

なぜあなたはhtmlを検証しないのですか？

ダブルIDは許可されていません。通常、解析エラーが発生します。

7
Natrium

重複を見つける別の方法ですが、これによりエラーのクラスが追加され、赤いテキストが表示されます。

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

これはトリックを行うかもしれません。重複する要素のすべてのIDを警告します。

<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>
2
Stephen Lacy

コンソールに実際の要素を吐き出すので、私はこれが好きです。これにより、何が起こっているかを簡単に調査できます。

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

}

1
Burton

このソリューションを使用すると、重複するIDが存在する場合、そのリストをコンソールに出力できます。

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タグを閉じる前に追加されます）

1
GibboK

ページ内またはページ全体で重複したIDを検索する特定の要素を検査できる関数を作成しました。

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