jQueryの「存在する」関数はありますか？

jQueryで要素の存在を確認するにはどうすればよいですか？

私が持っている現在のコードはこれです：

if ($(selector).length > 0) {
    // Do something
}

これに取り組むよりエレガントな方法はありますか？おそらくプラグインか関数か？

JavaScriptでは、すべてが「真実」または「虚偽」であり、数値0（およびNaN）のfalse場合、それ以外はすべてですtrue。だからあなたは書くことができます：

if ($(selector).length)

その>0部分は必要ありません。

はい！

jQuery.fn.exists = function(){ return this.length > 0; }

if ($(selector).exists()) {
    // Do something
}

これは、以下に対応するものです。JeffAtwoodによるHerding Codeポッドキャスト

使用した場合

jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }

それが不可能な場合でも連鎖が可能であったことを意味します。

これは良いでしょう：

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

または、FAQから：

if ( $('#myDiv').length ) { /* Do something */ }

以下を使用することもできます。jQueryオブジェクト配列に値がない場合、配列の最初の項目を取得すると未定義が返されます。

if ( $('#myDiv')[0] ) { /* Do something */ }

あなたはこれを使うことができます：

// if element exists
if($('selector').length){ /* do something */ }

// if element does not exist
if(!$('selector').length){ /* do something */ }

存在を確認する最も速く、最も意味的に自己説明的な方法は、実際にはplainを使用することですJavaScript：

if (document.getElementById('element_id')) {
    // Do something
}

jQueryの長さの代替よりも書くのに少し時間がかかりますが、それはネイティブJSメソッドであるため、実行が速くなります。

そして、それはあなた自身のjQuery関数を書く代替手段よりも優れています。@snoverが述べた理由により、その代替手段はより低速です。しかし、それはまた、exists()関数がjQueryに固有の何かであるという印象を他のプログラマーに与えるでしょう。JavaScript知識の負債を増やすことなく、コードを編集している他の人が理解する/理解する必要があります。

注：の前に「＃」がないことに注意してくださいelement_id（これはプレーンJSであるため、ではありませんjQuery）。

次のように書くことで数バイトを節約できます：

if ($(selector)[0]) { ... }

これは、作品たちから最初の項目を取得するために、配列参照解除演算子を使用することができるように、各jQueryオブジェクトはまた、配列になりすましているため、アレイ。undefined指定されたインデックスにアイテムがない場合に返されます。

以下を使用できます。

if ($(selector).is('*')) {
  // Do something
}

A 少しよりエレガントな、多分。

このプラグインは、次のifようなステートメントで使用できます。if ($(ele).exist()) { /* DO WORK */ }、コールバックます。

プラグイン

;;(function($) {
    if (!$.exist) {
        $.extend({
            exist: function() {
                var ele, cbmExist, cbmNotExist;
                if (arguments.length) {
                    for (x in arguments) {
                        switch (typeof arguments[x]) {
                            case 'function':
                                if (typeof cbmExist == "undefined") cbmExist = arguments[x];
                                else cbmNotExist = arguments[x];
                                break;
                            case 'object':
                                if (arguments[x] instanceof jQuery) ele = arguments[x];
                                else {
                                    var obj = arguments[x];
                                    for (y in obj) {
                                        if (typeof obj[y] == 'function') {
                                            if (typeof cbmExist == "undefined") cbmExist = obj[y];
                                            else cbmNotExist = obj[y];
                                        }
                                        if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];
                                        if (typeof obj[y] == 'string') ele = $(obj[y]);
                                    }
                                }
                                break;
                            case 'string':
                                ele = $(arguments[x]);
                                break;
                        }
                    }
                }

                if (typeof cbmExist == 'function') {
                    var exist =  ele.length > 0 ? true : false;
                    if (exist) {
                        return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });
                    }
                    else if (typeof cbmNotExist == 'function') {
                        cbmNotExist.apply(ele, [exist, ele]);
                        return ele;
                    }
                    else {
                        if (ele.length <= 1) return ele.length > 0 ? true : false;
                        else return ele.length;
                    }
                }
                else {
                    if (ele.length <= 1) return ele.length > 0 ? true : false;
                    else return ele.length;
                }

                return false;
            }
        });
        $.fn.extend({
            exist: function() {
                var args = [$(this)];
                if (arguments.length) for (x in arguments) args.push(arguments[x]);
                return $.exist.apply($, args);
            }
        });
    }
})(jQuery);

jsFiddle

1つまたは2つのコールバックを指定できます。最初の要素は要素が存在する場合に起動し、2番目の要素は要素が存在しない場合に起動します。ただし、関数を1つだけ渡すことを選択した場合、要素が存在する場合にのみ関数が起動します。したがって、選択した要素が失敗しない場合、チェーンは停止します存在します。もちろん、それが存在する場合、最初の関数が実行され、チェーンが続行されます。

コールバックバリアントを使用すると、連鎖性の維持に役立ちます。と連鎖てください。要素が返され、他のjQueryメソッドと同様にコマンドの連鎖を継続できます。

使用例

if ($.exist('#eleID')) {    /*    DO WORK    */ }        //    param as STRING
if ($.exist($('#eleID'))) { /*    DO WORK    */ }        //    param as jQuery OBJECT
if ($('#eleID').exist()) {  /*    DO WORK    */ }        //    enduced on jQuery OBJECT

$.exist('#eleID', function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
}, function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element DOES NOT EXIST    */
})

$('#eleID').exist(function() {            //    enduced on jQuery OBJECT with CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
})

$.exist({                        //    param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD
    element: '#eleID',
    callback: function() {
        /*    DO WORK    */
        /*    This will ONLY fire if the element EXIST    */
    }
})

ここでの答えのほとんどは正確ではないようです。要素の長さをチェックします。多くの場合問題はありませんが、100％ではない可能性があります。代わりに数値が関数に渡されるとしたら、すべてをチェックする関数のプロトタイプを作成します条件を設定し、本来あるべき答えを返します。

$.fn.exists = $.fn.exists || function() { 
  return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); 
}

これにより、長さとタイプの両方がチェックされます。これで、次のようにチェックできます。

$(1980).exists(); //return false
$([1,2,3]).exists(); //return false
$({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false
$([{nodeName: 'foo'}]).exists() // returns false
$('div').exists(); //return true
$('.header').exists(); //return true
$(document).exists(); //return true
$('body').exists(); //return true

jQueryは本当に必要ありません。単純なJavaScriptを使用すると、次の点を確認することが簡単かつ意味的に正しくなります。

if(document.getElementById("myElement")) {
    //Do something...
}

何らかの理由で要素にidを付けたくない場合でも、DOMにアクセスするように設計された他のJavaScriptメソッドを使用できます。

jQueryは本当にかっこいいですが、純粋なJavaScriptが忘却に陥らないようにしてください...

あなたはこれを使うことができます：

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something*/}

上記のすべての回答に.lengthパラメーターが必要な理由は、それらのほとんどが$()、カーテンの後ろにquerySelectorAllがあるjqueryのセレクターを使用している（または直接使用している）ためです。このメソッドは、DOMツリー全体を解析してすべてを探す必要があるため、かなり低速です。てそのセレクターとの一致を検索し、それらを配列に入力するです。

['length']パラメータは不要または有用ではありません。document.querySelector(selector)代わりに直接使用すると、一致する最初の要素を返すか、見つからない場合はnullを返すため、コードははるかに高速になります。

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

ただし、このメソッドを使用すると、実際のオブジェクトが返されます。変数として保存して繰り返し使用しない場合は問題ありません（したがって、忘れた場合でも参照を保持します）。

var myel=elementIfExists("#myid");
// now we are using a reference to the element which will linger after removal
myel.getParentNode.removeChild(myel);
console.log(elementIfExists("#myid")); /* null */
console.log(myel); /* giant table lingering around detached from document */
myel=null; /* now it can be garbage collected */

これが望ましい場合もあります。次のようなforループで使用できます。

/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
    if (myel == myblacklistedel) break;

実際に要素が必要なく、true / falseだけを取得/保存したい場合は、それを2倍にしてください!! ほどかれた靴でも機能するので、なぜここに結び目を作るのですか？

function elementExists(selector){
    return !!document.querySelector(selector);
}
/* usage: */
var hastables = elementExists("table");  /* will be true or false */
if (hastables){
    /* insert css style sheet for our pretty tables */
}
setTimeOut(function (){if (hastables && !elementExists("#mytablecss"))
                           alert("bad table layouts");},3000);

$.contains()あなたが欲しいのは何ですか？

jQuery.contains( container, contained )

$.contains()第二引数で与えられたDOM要素は、それが直接の子であるか、より深くネストされたかどうか、最初の引数で与えられたDOM要素の子孫である場合、メソッドはtrueを返します。それ以外の場合は、falseを返します。要素ノードのみがサポートされています。2番目の引数がテキストまたはコメントノードの場合、$.contains()falseを返します。

注：最初の引数は、jQueryオブジェクトやプレーンJavaScriptオブジェクトではなく、DOM要素でなければなりません。

私はif ($(selector).length) {}不十分であることがわかりました。selectorが空のオブジェクトである場合は、アプリを黙って中断します{}。

var $target = $({});        
console.log($target, $target.length);

// Console output:
// -------------------------------------
// [▼ Object              ] 1
//    ► __proto__: Object

私の唯一の提案は、の追加チェックを実行することです{}。

if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}

これは少し重いので、私はまだより良い解決策を探しています。

編集：警告！selectorが文字列の場合、これはIEでは機能しません。

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE

要素が存在するかどうかを確認するには、Javaスクリプトで長さを使用します。長さがゼロより大きい場合、要素は存在します長さがゼロの場合、要素は存在しません

// These by Id
if ($("#elementid").length > 0) {
  // Element is Present
} else {
  // Element is not Present
}

// These by Class
if ($(".elementClass").length > 0) {
  // Element is Present
} else {
  // Element is not Present
}

要素の存在の確認は、jQueryの公式Webサイト自体にきちんと文書化されています！

セレクターによって返されるjQueryコレクションの.lengthプロパティを使用します。

if ($("#myDiv").length) {
    $("#myDiv").show();
}

要素が存在するかどうかをテストする必要は必ずしもないことに注意してください。次のコードは、要素が存在する場合は要素を表示し、存在しない場合は何もしません（エラーなし）。

$("#myDiv").show();

これはすべての回答と非常によく似て!いますが、ブール値を取得できるように演算子を2回使用しないでください。

jQuery.fn.exists = function(){return !!this.length};

if ($(selector).exists()) {
    // the element exists, now what?...
}

$(selector).length && //Do something

DOM要素をテストしてみてください

if (!!$(selector)[0]) // do stuff

ハイウェイの答えに触発されて、私は次のことを思いつきました。

$.fn.exists = function() {
    return $.contains( document.documentElement, this[0] );
}

jQuery.containsは2つのDOM要素を受け取り、最初の要素に2 番目の要素が含まれているかどうかを確認します。

現在のドキュメント内の要素の存在を確認するためだけに適用したい場合document.documentElement、最初の引数としてを使用すると、existsメソッドのセマンティクスが満たされます。

以下は、私が一緒に比較しスニペット入れているjQuery.exists()反対$(sel)[0]して$(sel).lengthいるの両方の戻りアプローチtruthyの値$(4)しばらく$(4).exists()リターンをfalse。DOM内の要素の存在を確認する状況では、これは望ましい結果のようです。

$.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
  var testFuncs = [
    function(jq) { return !!jq[0]; },
    function(jq) { return !!jq.length; },
    function(jq) { return jq.exists(); },
  ];
    
  var inputs = [
    ["$()",$()],
    ["$(4)",$(4)],
    ["$('#idoexist')",$('#idoexist')],
    ["$('#idontexist')",$('#idontexist')]
  ];
  
  for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) {
    input = inputs[i][1];
    tr = "<tr><td>" + inputs[i][0] + "</td><td>"
          + testFuncs[0](input) + "</td><td>"
          + testFuncs[1](input) + "</td><td>"
          + testFuncs[2](input) + "</td></tr>";
    $("table").append(tr);
  }

td { border: 1px solid black }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idoexist">#idoexist</div>
<table style>
<tr>
  <td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td>
</tr>
</table>
<script>
  
  $.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
</script>

jQueryの必要なし（基本的なソリューション）

if(document.querySelector('.a-class')) {
  // do something
}

以下のはるかにパフォーマンスの高いオプション（aクラスの前にドットがないことに注意してください）。

if(document.getElementsByClassName('a-class')[0]) {
  // do something
}

querySelectorは、jQueryで$（）（sizzle）のような適切なマッチングエンジンを使用し、より多くの計算能力を使用しますが、99％の場合は問題ありません。2番目のオプションはより明示的で、コードに何をすべきかを正確に伝えます。jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25によると、はるかに高速です。

私はこれを行うために単純なバニラJavaScriptを使用したいだけです。

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}

私はこの質問に出くわしました、そして私が現在使用しているコードのスニペットを共有したいと思います：

$.fn.exists = function(callback) {
    var self = this;
    var wrapper = (function(){
            function notExists () {}

            notExists.prototype.otherwise = function(fallback){
                if (!self.length) {                    
                    fallback.call();
                }
            };

            return new notExists;
        })();

    if(self.length) {
        callback.call();    
    }

    return wrapper;
}

そして今、私はこのようなコードを書くことができます-

$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});

たくさんのコードのように見えるかもしれませんが、CoffeeScriptで記述した場合、コードは非常に小さくなります。

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists

オブジェクトが別のオブジェクトの内部に存在するかどうかを確認したい場合があったので、セレクター内のセレクターをチェックするために最初の回答に何かを追加しました。

// Checks if an object exists.
// Usage:
//
//     $(selector).exists()
//
// Or:
// 
//     $(selector).exists(anotherSelector);
jQuery.fn.exists = function(selector) {
    return selector ? this.find(selector).length : this.length;
};

どうですか：

function exists(selector) {
    return $(selector).length;
}

if (exists(selector)) {
    // do something
}

それは非常に最小限であり、$()毎回セレクターを囲む必要がなくなります。

私はこれを使っています：

    $.fn.ifExists = function(fn) {
      if (this.length) {
        $(fn(this));
      }
    };
    $("#element").ifExists( 
      function($this){
        $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')});               
      }
    ); 

jQuery要素が存在する場合にのみチェーンを実行します-http://jsfiddle.net/andres_314/vbNM3/2/

ここexistにjQueryの私のお気に入りのメソッドがあります

$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

        if (this.length > 0 && typeof callback === 'function') {
            callback.call(target);
        }
    });
};

セレクタが存在しない場合のコールバックをサポートする他のバージョン

$.fn.exist = function(onExist, onNotExist) {
    return $(this).each(function() {
        var target = $(this);

        if (this.length > 0) {
            if (typeof onExist === 'function') {
                onExist.call(target);
            }
        } else {
            if (typeof onNotExist === 'function') {
                onNotExist.call(target);
            }
        }
    });
};

例：

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);

$("selector"）は、lengthプロパティを持つオブジェクトを返します。セレクタが要素を見つけると、それらはオブジェクトに含まれます。その長さを確認すると、要素が存在するかどうかを確認できます。JavaScript 0 == falseでは、取得できない場合は0コードが実行されます。

if($("selector").length){
   //code in the case
} 

さまざまな状況の完全な例と、jQueryセレクターが配列または要素を返すため、jQueryセレクターが機能するかどうかに関係なく、direct ifを使用して要素が存在するかどうかを確認する方法の完全な例を次に示します。

var a = null;

var b = []

var c = undefined ;

if(a) { console.log(" a exist")} else { console.log("a doesn't exit")}
// output: a doesn't exit

if(b) { console.log(" b exist")} else { console.log("b doesn't exit")}
// output: b exist

if(c) { console.log(" c exist")} else { console.log("c doesn't exit")}
// output: c doesn't exit

最終的解決

if($("#xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
//output : xusyxxs doesnn't exist

if($(".xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
    //output : xusyxxs doesnn't exist

あなたはそれがより大きいのですかどうかをチェックする必要はありません0ように$(selector).length > 0、$(selector).lengthそれは十分だと要素の存在を確認するためのエレガントな方法。これ以上のことをしたいのであれば、これだけの関数を書くのは価値があるとは思いません。

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}