Vraag Bestaat er een "bestaat" -functie voor jQuery?


Hoe kan ik het bestaan ​​van een element in jQuery controleren?

De huidige code die ik heb is dit:

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

Is er een elegantere manier om dit te benaderen? Misschien een plug-in of een functie?


2322
2017-08-27 19:49


oorsprong


antwoorden:


In JavaScript is alles 'waarheidsgetrouw' of 'vals' en voor cijfers 0 (en NaN) betekent false, al de rest true. Dus je zou kunnen schrijven:

if ($(selector).length)

Dat heb je niet nodig >0 een deel.


2062
2018-02-25 19:16



Ja!

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

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

Dit is als antwoord op: Herding Code podcast met Jeff Atwood


1247
2017-08-27 19:50



Als je het hebt gebruikt

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

je zou impliceren dat ketenen mogelijk was als dat niet het geval was.

Dit zou beter zijn:

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

Alternatief, uit de FAQ:

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

Je zou ook het volgende kunnen gebruiken. Als er geen waarden in de jQuery-objectarray staan, wordt het eerste item in de array ongedefinieerd retourneren.

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

323
2018-01-14 19:46



U kunt dit gebruiken:

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

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

98
2018-04-03 12:17



De snelste en meest semantisch zelfverklarende manier om te controleren of het bestaan ​​bestaat, is eigenlijk met behulp van gewoon JavaScript:

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

Het is iets langer om te schrijven dan het alternatief voor jQuery-lengte, maar wordt sneller uitgevoerd omdat het een native JS-methode is.

En het is beter dan het alternatief om je eigen jQuery-functie te schrijven. Dat alternatief is langzamer, om de redenen die @snover heeft genoemd. Maar het zou ook andere programmeurs de indruk geven dat de exist () functie iets is dat inherent is aan jQuery. JavaScript zou moeten worden begrepen door anderen die uw code bewerken, zonder toegenomen kennisschuld.

NB: Let op het ontbreken van een '#' voor de element_id (aangezien dit gewoon JS is, geen jQuery).


73
2018-01-11 12:27



U kunt een paar bytes opslaan door te schrijven:

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

Dit werkt omdat elk jQuery-object zich ook voordoet als een array, dus we kunnen de array dereferencing-operator gebruiken om het eerste item uit de array te halen rangschikking. Het komt terug undefined als er geen item op de opgegeven index staat.


53
2018-01-18 09:04



Je kunt gebruiken:

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

EEN weinig eleganter misschien.


50
2017-09-17 17:53



Deze plug-in kan worden gebruikt in een if verklaring zoals if ($(ele).exist()) { /* DO WORK */ } of een callback gebruiken.

Inpluggen

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

U kunt een of twee callbacks opgeven. De eerste zal vuren als het element bestaat, de tweede zal vuren als het element dat wel doet niet bestaan. Als u er echter voor kiest om slechts één functie door te geven, zal deze alleen vuren als het element bestaat. De ketting zal dus sterven als het geselecteerde element dat doet niet bestaan. Natuurlijk, als het bestaat, zal de eerste functie worden geactiveerd en zal de ketting doorgaan.

Houd er rekening mee dat het gebruik van de callback-variant helpt om de ketenbaarheid te behouden - het element wordt teruggestuurd en je kunt kettingopdrachten blijven gebruiken zoals bij elke andere jQuery-methode!

Gebruik van voorbeelden

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

48
2017-11-14 14:20