回答:
次のように、JQueryから返される最初のオブジェクトをチェックすることで、これを簡略化できます。
if ($(".mydivclass")[0]){
// Do something if class exists
} else {
// Do something if class does not exist
}
この場合、最初の([0]
)インデックスに真の値がある場合、クラスが存在すると仮定します。
2013年4月10日を編集:ここで jsperfテストケースを作成しました。
:first
そこにをスローするとパフォーマンスが向上すると思います(パフォーマンスが@itgorillaの重要な基準であるかどうかはわかりません)が、ブラウザーによって大きく異なるかどうかは、おそらくjQueryが選択。ここではdiv要素が存在するテストケースだし、ここでそれが存在しないものです。
if (!$(".mydivclass")[0]){ /* do stuff */ }
を使用できますsize()
が、jQueryは長さを使用して別の関数呼び出しのオーバーヘッドを回避することをお勧めします。
$('div.mydivclass').length
そう:
// since length is zero, it evaluates to false
if ($('div.mydivclass').length) {
更新
選択された回答はperfテストを使用していますが、perfの一部として要素の選択も含まれているため、多少の欠陥があります。これは、ここではテストされていません。更新されたパフォーマンステストは次のとおりです。
http://jsperf.com/check-if-div-exists/3
テストの最初の実行では、プロパティの取得がインデックスの取得よりも高速であることを示していますが、IMOは無視できます。私はまだ長さを使用することを好みますが、より簡潔な条件ではなく、コードの意図に関してより理にかなっています。
.length
現在最高の平均パフォーマンスを提供しています。
ネイティブJavaScriptは常に高速になります。この場合:(例)
if (document.querySelector('.mydivclass') !== null) {
// .. it exists
}
親要素に特定のクラスを持つ別の要素が含まれているかどうかを確認する場合は、次のいずれかを使用できます。(例)
var parent = document.querySelector('.parent');
if (parent.querySelector('.child') !== null) {
// .. it exists as a child
}
または、.contains()
親要素でメソッドを使用できます。(例)
var parent = document.querySelector('.parent'),
child = document.querySelector('.child');
if (parent.contains(child)) {
// .. it exists as a child
}
..そして最後に、特定の要素に特定のクラスが含まれているだけかどうかを確認する場合は、次のコードを使用します。
if (el.classList.contains(className)) {
// .. el contains the class
}
$('div').hasClass('mydivclass')// Returns true if the class exist.
div
要素の配列を構築してから、戻ってそれらをループして、それらがそのクラスを持っているかどうかを確認します。すべて、最後に配列を破棄します)。
hasClass
は、ここにある他のセレクターより33%高速です。jsperf.com/hasclass00を
div
私が強調した問題(アレイの構築)を回避する、完全に非現実的なテストケース(2つの要素)がある場合のみ。たくさんのdivを使って試してください:jsperf.com/hasclass00/2 Chromeのコピーでは63%遅く、Firefoxのコピーでは43%遅く、Operaでは98%(!)遅くなります。しかし、さらに、セレクターエンジンに必要なすべての情報を提供するよりも、divのリストを作成してから検索する方が遅いことは理にかなっています。
これはJQueryを使用しないソリューションです
var hasClass = element.classList.contains('class name to search');
// hasClass is boolean
if(hasClass === true)
{
// Class exists
}
参照リンク
div
要素を明示的にテストするには:
if( $('div.mydivclass').length ){...}
.mydivclass
、ブラウザとjQueryのバージョンに依存するよりも少し遅いかもしれません。
div
、セレクターの一部を実際に最初にインクルードするという私の投票を獲得します。
ここにいくつかの方法があります:
1. if($("div").hasClass("mydivclass")){
//Your code
//It returns true if any div has 'mydivclass' name. It is a based on the class name
}
2. if($("#myid1").hasClass("mydivclass")){
//Your code
// It returns true if specific div(myid1) has this class "mydivclass" name.
// It is a based on the specific div id's.
}
3. if($("div[class='mydivclass']").length > 0){
//Your code
// It returns all the divs whose class name is "mydivclass"
// and it's length would be greater than one.
}
要件に基づいて定義された方法のいずれかを使用できます。
if ($(".mydivclass").size()){
// code here
}
このsize()
メソッドは、jQueryセレクターが選択する要素の数(この場合はクラスを持つ要素の数)を返すだけmydivclass
です。0を返す場合、式はfalseであるため何もありません。他の数値を返す場合、divが存在する必要があります。
length
プロパティがあるときにメソッドを呼び出すのはなぜですか?また、これは、だけでなく、そのクラスの要素をチェックしますdiv
。(今、それはOPが意味したことかもしれませんが、彼/彼女が言ったことではありません。)OPが実際に言ったことを実行するStefan Kendallの回答を参照してください(ただし、繰り返しますが、彼らはあなたがしたことを意味しているかもしれません)。
div
パーツを削除しました。2つの理由があります。1)セレクターが、OPがdiv
要素を使用するという事実に限定されていない(将来変更される可能性がある)、および2)でほとんどのブラウザとjQueryのバージョン、AFAIK、これはより高速になるはずです。
length
それを使用しない理由プロパティは、ありますか?しかし、それがあなたの好みであれば、公平な態度です。もう1つは、あなたがそれを編集したことを知りませんでした。私がそれをするつもりなら、私はそれを残しました(再び、彼は特に「... div with ...」(私の強調)を具体的に言った後、それが問題ではないかどうかに関係なく、だったdiv
かどうか、あなたはその部分を捨てることができしかし、何:-)。。
size()
はありません。古い配列だけでなく、jQueryセレクターで要素の数をカウントしていることを明確にするためのメソッドがあると思います。しかし、繰り返しますが、それは私の好みです。
var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}
Jqueryでは、このように使用できます。
if ($(".className")[0]){
// Do something if class exists
} else {
// Do something if class does not exist
}
JavaScriptを使用
if (document.getElementsByClassName("className").length > 0) {
// Do something if class exists
}else{
// Do something if class does not exist
}
JavaScriptのチェッククラス(hasClass)の非常にサンプルのソリューションを次に示します。
const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
// do something if 'hasClass' is exist.
}