2013-03-05 17 views
10

DOM要素がjavascriptに存在するかどうかを確認するベストプラクティスは何ですか?DOM要素がベストプラクティスであるかどうかのjavascriptチェック

アイテムを使用する前にアイテムが存在するかどうかを確認する必要がありますか?

if ($("#" + machineId + packageId.removeSpecialChars().toUpperCase() + "").size() != 0) { 
    var row = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + ""); 
} 

packageId.removeSpecialChars().toUpperCase()を2回実行しませんか?

これはより良いオプションでしょうか?

var row = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + ""); 
if (row) 
{ 
    // do something 
} 

ただし、見つからない場合は例外がスローされませんか?

+0

は、両方のライン '+「」'からこれを削除します。現時点での最善の解決策は、コードの以下のようなものになるだろうので8は、そう、あなたはjQueryの古いバージョンを使用しても使用することをお勧めしません。 – Jai

+0

'size()'は非推奨です....代わりに 'length'を使用してください – charlietfl

答えて

21

あなたが実際にDOM要素を操作している、[はい、あなたはそれが存在することを確認する必要がありますJavaScriptエラーを避けるために、このスクリプトを使用しようとする前に、しかし、ではなくDOMエレメントを扱うであるため、(潜在的に)DOMエレメントを含むjQueryオブジェクトを使用しています。

jQuery関数は、すでに要素のセットに一致するものがない場合を処理しています。そのため、要素を処理しようとする前に要素が存在することを明示的にチェックする必要はありません。 .get()関数または[index]角括弧表記を使用して、DOM要素をそのセットの中から直接参照しようとする場合にのみ、これを行う必要があります。

さておき、.size() jQueryの機能は、バージョン1.8で非推奨たので、そのように、要素があるかどうかを確認するために、直接jQueryオブジェクトのlengthプロパティを使用する必要がありますが:

var $object = $('a-selector'); 
if($object.length) { 
    // there's at least one matching element 
} 
+1

これは間違っています。それは 'if($ object.length> 0)'でなければなりません。まだ未知のセレクタの場合でも0を返します。 – Archer

+5

@Archer "未選択セレクタ"とはどういう意味ですか?どの要素にも一致しないセレクタを意味するならば、それは「0」を返します。これはまさに私たちが望むものです。 '0'は偽であるため、jQueryオブジェクトに要素がない場合、' if'条件は失敗します。 –

+1

まあまあ!ありがとうアンソニー - 私は、ifステートメントで0がfalseとして読み取られることは決してありませんでした。だから私はあなたを "訂正"していたのです。その日のために学んだ新しいことに感謝します。 +1を持ってください: – Archer

1

一般的なプログラミング慣習では、は自分自身を繰り返さないでください。。したがって、この場合には、あなたは少なくとも一度だけの事の発見を行うと、変数参照保つことができる:

var thing = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + ""); 

を次に選択ルックアップは二回発生しません、削除冗長なメソッド呼び出しなどこれも持っていますthingまたはeeek以外の変数に意味のある名前を付けることができるときに、自明のコードを書くことができるという利点があります。a(そのコードがより有意義でなければならないので、それは必ずしもありませんが、人aようまだ使用の名前を!)メソッドを複数回呼び出すよう

if (thing != null) { } 
if (thing.size() != 0) { 

} 
etc. 

、それはしばしば避けられないのです。

+0

JSでヌルを特にチェックするのは悪い習慣と考えられます。定義されていない可能性もあるので、存在しているかどうかをチェックしてください。0または偽 – thomaux

+0

@Anzeo必要に応じて 'null'または' undefined'をチェックしてください。 –

0

それがない、何が必要です:より良い

var a = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + ""); 
if (a.size()) { 
    var row = a; 
} 
1

がそれをキャッシュする:

var machId = $("#" + machineId + packageId.removeSpecialChars().toUpperCase()); 
if (machId.size() != 0) { 
    var row = machId; 
} 
0

あなたは基本的にかどうかを確認する必要がありますDOM要素がHTMLに存在しますが、要素がDOMに存在しない場合はjQueryが致命的なエラーをスローしないことを覚えておいてください。ただし、チェックするのが良い方法です。バージョン1から廃止された.size()という名前のもの。

if($('.class').length) { // check if any element with this class exist, if not exist, it return 0 and can not pass the if estatement 
    // do something 
} 
関連する問題