2

div、span、および入力の厳密な命名規則がないため、誤って複数の入力に同じ ID を与えることがよくあります。これにより、もちろん jQuery/javascript コードが機能しなくなります。

複数の要素に同じ ID を指定することは許可されていませんが、それが発生してもエラー メッセージはどこにも表示されません。私がしたこと。

複数の要素が同じ ID を持っていることを知る方法はありますか?

4

5 に答える 5

3

これは、HTML を何度も何度も書くことで学べる標準的な方法です。重複する ID の使用を避ける良い方法は、使用する ID を減らし、代わりにクラスを使用することです。

、、、、など#header、ウェブサイトの重要な要素や構造要素にのみ ID を使用してください。#footer#main#slideshow#content#sidebar

ページでIDを何度も繰り返している場合は、クラスを使用する必要があります。複数回再利用される要素/スタイル付きモジュールは、クラスを使用して識別される必要があります。

また、一部の IDE では、特別な構文の強調表示/テキスト装飾を実行して、奇妙なことが起こっていることを知らせます。すぐに思い浮かぶのは、SublimeText2 と Visual Studio の 2 つです。

ページ上の重複 ID をチェックするために実行できる jQuery スニペットを次に示します。ページに重複がある場合は、コンソール (F12 開発者ツール/Firebug) で通知されます。

(function () {  
    var found = false;  
    $('[id]').each(function () {  
        var ids = $('[id=' + this.id + ']');  
        if (ids.length > 1 && ids[0] === this) {  
            console.warn('ID used more than once: ' + this.id, ids);  
            found = true;  
        }  
    });  
    if (!found) {  
        console.log('No duplicate IDs found');  
    }  
})();

これをグローバル フッターに挿入して、すべてのページで実行されるようにすることもできます。

ここに JSFiddle があります: http://jsfiddle.net/A7h75/

ここからスクリプトを取得します。

于 2013-04-12T22:45:14.363 に答える
1

優れた IDE はこれをキャッチします。私は Zend Studio (これは基本的にEclipseの PHP 固有のバージョンです) を使用しており、コードを記述するときにこれをキャッチします。釣れるのはそれくらいです。

于 2013-04-12T22:44:13.223 に答える
1

HTML が有効かどうかは、 W3C Validator Serviceで確認できます。

これにより、HTML 内のすべてのエラーが表示されます。クロスブラウザー レンダリングの問題を引き起こす可能性のあるエラーについて HTML をチェックすることをお勧めします。

Validator サービスに「手動で」アクセスすることなく HTML をチェックするための Firefox および Chrome 用のさまざまな拡張機能が存在します。

于 2013-04-12T22:45:19.410 に答える
0

この機能を利用して重複をチェックできます 

function getDuplicateIds(){
    var dups = [];
    $('[id]').each(function(){
        if($('[id="'+$(this).attr('id')+'"]').length > 1) dups.push($(this).attr('id'));
    })
    return $.unique(dups);
}
于 2013-04-12T23:08:50.173 に答える
-1

これに対してエラーを有効にする方法はありませんが、特定の状況では: 

$('[id={elementId}]').length > 1

トリックを行う必要があります。

編集：訂正していただきありがとうございます。

于 2013-04-12T22:44:37.507 に答える