javascript - 違い - jQueryの「存在する」関数はありますか?




jquery 読み込み (20)

JavaScriptでは、すべてが '真実'または '虚偽'であり、数値 0 (およびNaN)については false 、それ以外はすべて true 意味し true 。 だからあなたは書くことができます:

if ($(selector).length)

あなたはその >0 部分を必要としません。

jQueryで要素の存在を確認する方法

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

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

これに近づくためのもっとエレガントな方法はありますか? おそらくプラグインか関数か


jQueryは必要ありません(基本ソリューション)

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

以下にもっとパフォーマンスのよいオプションがあります(a-classの前にドットがないことに注意してください)。

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

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


あなたが使用することができます:

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

もう少し エレガントなのかもしれません。


あなたはこれを使用することができます:

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

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

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

// 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;
};

このプラグインは、 if if ($(ele).exist()) { /* DO WORK */ } ような if 文で使用することも、コールバックを使用することもできます。

プラグイン

;;(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    */
    }
})

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

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

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

これは配列や要素を返すのでjQueryセレクタでは動作するかもしれないしまたは動作しないかもしれない場合に直接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

どうですか?

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

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

ごくわずかなので、毎回セレクタを $() で囲む必要がありません。



存在を確認するための最も速く意味的に自己説明的な方法は、実際にはプレーンな JavaScript を使用することです。

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

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

そしてそれはあなた自身の jQuery 関数を書く代わりの方法よりも優れています。 @snoverが述べた理由から、この方法は遅くなります。 しかし、それは、 exists() 関数がjQueryに固有のものであるという印象を他のプログラマーにも与えるでしょう。 知識の借金を増やすことなく、 JavaScript を他の人がコードを編集することで理解できるはずです。

NB: element_id の前に '#'がないことに注意してください(これはプレーンなJSであり jQuery ではないため)。


本当にjQueryは必要ありません。 単純なJavaScriptでは、以下をチェックするのが簡単で意味的に正しいです。

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

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

jQueryは本当にクールですが、純粋なJavaScriptを忘れることはできません。


私はここで答えの大部分が 正確 では ないと思う 、彼らは要素の長さをチェックし、それは多くの場合 OK でも 構い ませんが100% ではなく、numberが代わりに関数に渡されると想像します。以下のように条件を設定して答えを返します。

$.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: '', url: 'http://www..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

私はこの質問につまずいたし、私が現在使用しているコードの断片を共有したいと思います。

$.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

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

    $.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/


hiwayの回答 に触発されて、私は以下のことを思いついた。

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

$.contains() は2つのDOM要素を取り、最初の要素に2 $.contains() 要素が含まれているかどうかを確認します。

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

以下に、 jQuery.exists()$(sel)[0] および $(sel).length アプローチを比較するスニペットをまとめました。これらのアプローチはどちらも $(4) に対して truthy 値を返しますが、 $(4).exists()false 返し 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 Webサイト自体にきちんと文書化されています!

セレクタから返されたjQueryコレクションの .length プロパティを使用します。

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

要素が存在するかどうかをテストする必要はありません。 次のコードは、要素が存在する場合はその要素を表示し、存在しない場合は(エラーなしで)何もしません。

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

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

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

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

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

if ($(selector).length) {} が不十分である 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




jquery