javascript erstellen Gibt es eine Funktion für jQuery?




javascript mehrere funktionen (24)

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?


Answer #1

Ist $.contains() was Sie wollen?

jQuery.contains( container, contained )

Die $.contains() -Methode gibt true zurück, wenn das DOM-Element, das vom zweiten Argument bereitgestellt wird, ein Nachkomme des DOM-Elements ist, das vom ersten Argument bereitgestellt wird. Andernfalls wird false zurückgegeben. Es werden nur Elementknoten unterstützt. Wenn das zweite Argument ein Text- oder Kommentarknoten ist, gibt $.contains() false zurück.

Hinweis : Das erste Argument muss ein DOM-Element sein, kein jQuery-Objekt oder einfaches JavaScript-Objekt.


Answer #2

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.


Answer #3

Hier ist meine bevorzugte exist Methode in jQuery

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

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

und andere Version, die Rückruf unterstützt, wenn der Selektor nicht vorhanden ist

$.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);
            }
        }
    });
};

Beispiel:

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

Answer #4

Ich bin über diese Frage gestolpert und möchte einen Code-Ausschnitt teilen, den ich aktuell verwende:

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

Und jetzt kann ich so Code schreiben -

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

Es mag viel Code erscheinen, aber wenn es in CoffeeScript geschrieben ist, ist es recht klein:

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

Answer #5

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.


Answer #6

Keine Notwendigkeit für jQuery

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

Answer #7

Die Überprüfung auf Vorhandensein eines Elements wird auf der offiziellen jQuery-Website selbst genau dokumentiert!

Verwenden Sie die .length Eigenschaft der von Ihrem Selector zurückgegebenen jQuery-Auflistung:

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

Beachten Sie, dass nicht immer geprüft werden muss, ob ein Element vorhanden ist. Der folgende Code zeigt das Element an, wenn es existiert, und tut nichts (ohne Fehler), wenn dies nicht der Fall ist:

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

Answer #8

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/


Answer #9

Sie können dies verwenden:

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

Answer #10

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

Answer #11

Dies ist allen Antworten sehr ähnlich, aber warum nicht die ! Operator zweimal, so dass Sie einen Boolean bekommen können:

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

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

Answer #12

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.


Answer #13

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>


Answer #14

Sie können überprüfen, ob das Element vorhanden ist oder die Länge in Java-Skript nicht verwendet. Ist die Länge größer als Null, ist das Element vorhanden. Wenn die Länge Null ist, ist das Element nicht vorhanden

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

Answer #15

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

Answer #16

$("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
} 

Answer #17

Sie könnten dies verwenden:

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

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

Answer #18

Ich sehe, dass die meisten Antworten hier nicht genau sind, wie sie sein sollten, sie überprüfen die Elementlänge, es kann in vielen Fällen OK sein, aber nicht 100%. Stellen Sie sich vor, wenn die Zahl stattdessen an die Funktion übergeben wird, also protokolliere ich eine Funktion, die alle überprüft Bedingungen und geben Sie die Antwort so zurück, wie sie sein sollte:

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

Hiermit werden Länge und Typ geprüft. Jetzt können Sie es auf folgende Weise überprüfen:

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

Answer #19

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

Answer #20

Ja!

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

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

Dies ist eine Antwort auf: Herding Code-Podcast mit Jeff Atwood


Answer #21

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

Answer #22

Testen Sie das DOM Element

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

Answer #23

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
}

Answer #24

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





jquery