javascript - mehrere - Gibt es eine Funktion für jQuery?




jquery funktionen (20)

Wie kann ich die Existenz eines Elements in jQuery überprüfen?

Der aktuelle Code, den ich habe, lautet:

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

Gibt es einen eleganteren Weg, um dies zu erreichen? Vielleicht ein Plugin oder eine Funktion?


Der Grund für alle vorherigen Antworten ist der .length Parameter, weil sie meistens den $() Selector von jquery verwenden, der hinter den Vorhängen querySelectorAll hat (oder sie direkt verwenden). Diese Methode ist ziemlich langsam, da sie den gesamten DOM-Baum analysieren muss, um alle Übereinstimmungen mit diesem Selektor zu suchen und ein Array mit diesen zu füllen.

Der Parameter ['length'] ist nicht erforderlich oder nützlich, und der Code wird viel schneller, wenn Sie stattdessen direkt document.querySelector(selector) verwenden, da er das erste entsprechende Element zurückgibt oder null, wenn er nicht gefunden wird.

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

Bei dieser Methode bleibt jedoch das eigentliche Objekt zurück. Das ist in Ordnung, wenn es nicht als Variable gespeichert und wiederholt verwendet wird (wodurch die Referenz erhalten bleibt, wenn wir es vergessen).

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 */

In einigen Fällen kann dies erwünscht sein. Es kann in einer for-Schleife wie folgt verwendet werden:

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

Wenn Sie das Element nicht wirklich benötigen und nur ein wahres / falsches Objekt abrufen / speichern möchten, verdoppeln Sie es einfach nicht !! Es funktioniert für Schuhe, die ungebunden kommen, warum also hier knoten?

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);

Der schnellste und semantisch selbsterklärende Weg, um nach Existenz zu suchen, ist eigentlich einfaches JavaScript:

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

Es ist etwas länger zu schreiben als die jQuery-Längenvariante, wird jedoch schneller ausgeführt, da es sich um eine native JS-Methode handelt.

Und es ist besser als die Alternative, Ihre eigene jQuery-Funktion zu schreiben. Diese Alternative ist aus den von @snover genannten Gründen langsamer. Es würde aber auch anderen Programmierern den Eindruck vermitteln, dass die exists () - Funktion jQuery innewohnt. JavaScript würde / sollte von anderen verstanden werden, die Ihren Code bearbeiten, ohne die Wissensschuld zu erhöhen.

Hinweis: Beachten Sie das Fehlen eines '#' vor der element_id (da dies einfach JS ist, nicht jQuery).


Dieses Plugin kann in einer if if ($(ele).exist()) { /* DO WORK */ } wie if ($(ele).exist()) { /* DO WORK */ } oder mit einem Callback verwendet werden.

Plugin

;;(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

Sie können einen oder zwei Rückrufe angeben. Der erste wird ausgelöst, wenn das Element vorhanden ist, der zweite wird ausgelöst, wenn das Element nicht vorhanden ist. Wenn Sie jedoch nur eine Funktion übergeben, wird diese nur ausgelöst, wenn das Element vorhanden ist. Die Kette stirbt also, wenn das ausgewählte Element nicht vorhanden ist. Wenn es diese gibt, wird natürlich die erste Funktion ausgelöst und die Kette wird fortgesetzt.

Beachten Sie, dass die Callback-Variante die Kettenfähigkeit aufrechterhält - das Element wird zurückgegeben, und Sie können Befehle wie bei jeder anderen jQuery-Methode verketten!

Beispielverwendungen

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

Es ist wirklich keine Notwendigkeit für jQuery. Mit einfachem JavaScript ist es einfacher und semantisch korrekt auf Folgendes zu prüfen:

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

Wenn Sie aus irgendeinem Grund keine ID für das Element angeben möchten, können Sie dennoch eine andere JavaScript-Methode verwenden, die für den Zugriff auf das DOM entwickelt wurde.

jQuery ist wirklich cool, aber lassen Sie reines JavaScript nicht in Vergessenheit geraten ...


Ich benutze das:

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

Führen Sie die Kette nur aus, wenn ein jQuery-Element vorhanden ist - http://jsfiddle.net/andres_314/vbNM3/2/


Ich benutze einfach nur Vanille-Javascript, um dies zu tun.

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

Ich habe festgestellt, dass if ($(selector).length) {} nicht ausreicht. Die App wird unbemerkt unterbrochen, wenn der selector ein leeres Objekt {} .

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

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

Mein einziger Vorschlag ist, eine zusätzliche Prüfung für {} durchzuführen.

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

Ich suche immer noch nach einer besseren Lösung, da diese etwas schwer ist.

Bearbeiten: WARNUNG! Dies funktioniert nicht im IE, wenn der selector eine Zeichenfolge ist.

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

Ich hatte einen Fall, in dem ich sehen wollte, ob ein Objekt in einem anderen Objekt vorhanden ist. Daher fügte ich der ersten Antwort etwas hinzu, um nach einem Selektor im Selektor zu suchen.

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

In JavaScript ist alles "wahr" oder "falsch" und für Zahlen 0 (und NaN) bedeutet false , alles andere ist true . Sie könnten also schreiben:

if ($(selector).length)

Du brauchst diesen Teil nicht.


Inspiriert von der Antwort von hiway habe ich folgendes gefunden:

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

$.contains() nimmt zwei DOM-Elemente und prüft, ob das erste das zweite enthält.

Die Verwendung von document.documentElement als erstes Argument erfüllt die Semantik der exists Methode, wenn wir sie ausschließlich zur Überprüfung der Existenz eines Elements im aktuellen Dokument verwenden möchten.

Im Folgenden habe ich ein Snippet zusammengestellt, das jQuery.exists() mit den jQuery.exists() $(sel)[0] und $(sel).length , die beide truthy Werte für $(4) und $(4).exists() gibt false . Im Rahmen der Überprüfung auf Vorhandensein eines Elements im DOM scheint dies das gewünschte Ergebnis zu sein .

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



Keine Notwendigkeit für jQuery

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

Sie können dies verwenden:

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

Sie können einige Bytes speichern, indem Sie schreiben:

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

Dies funktioniert, da jedes jQuery-Objekt auch als Array maskiert wird. Daher können Sie den Array-Dereferenzierungsoperator verwenden, um das erste Element aus dem Array abzurufen . Es wird undefined wenn der angegebene Index kein Element enthält.


Sie könnten dies verwenden:

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

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

Sie müssen nicht prüfen, ob sie größer als 0 wie $(selector).length > 0 , $(selector).length ist ausreichend und eine elegante Möglichkeit, die Existenz von Elementen zu überprüfen. Ich denke nicht, dass es sich lohnt, nur dafür eine Funktion zu schreiben, wenn Sie mehr Dinge tun wollen, ja.

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

Wenn du benutzt hast

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

Sie würden implizieren, dass Verkettung möglich ist, wenn dies nicht der Fall ist.

Das wäre besser:

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

Alternativ aus der FAQ :

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

Sie können auch Folgendes verwenden. Wenn das jQuery-Objektarray keine Werte enthält, wird das Abrufen des ersten Elements im Array undefiniert zurückgegeben.

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

Wie wäre es mit:

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

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

Es ist sehr minimal und erspart Ihnen, den Selector jedes Mal mit $() kennzeichnen.


$("selector" ) gibt ein Objekt mit length . Wenn in der Auswahl Elemente vorhanden sind, werden diese vom Objekt abgerufen. Wenn Sie also die Länge überprüfen, die Sie bereits finden können, gibt es ein Element. In Javascript 0 == false auch null == false . Wenn Sie keine 0 Ihre Codes ausgeführt.

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

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






jquery