javascript - w3school - Esiste una funzione "esiste" per jQuery?




jquery w3school (20)

Come posso verificare l'esistenza di un elemento in jQuery?

Il codice corrente che ho è questo:

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

C'è un modo più elegante per avvicinarsi a questo? Forse un plugin o una funzione?


È possibile controllare che l'elemento sia presente o meno usando la lunghezza nello script java. Se la lunghezza è maggiore di zero, allora l'elemento è presente se la lunghezza è zero, quindi l'elemento non è presente

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

Avevo un caso in cui volevo vedere se un oggetto esiste all'interno di un altro, quindi ho aggiunto qualcosa alla prima risposta per controllare un selettore all'interno del selettore.

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

Ecco il mio metodo exist preferito in jQuery

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

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

e altra versione che supporta la richiamata quando il selettore non esiste

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

Esempio:

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

Ho trovato if ($(selector).length) {} per essere insufficiente. Interrompe silenziosamente la tua app quando il selector è un oggetto vuoto {} .

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

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

Il mio unico suggerimento è di eseguire un controllo aggiuntivo per {} .

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

Sto ancora cercando una soluzione migliore anche se questo è un po 'pesante.

Modifica: ATTENZIONE! Questo non funziona in IE quando il selector è una stringa.

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

In JavaScript, tutto è "verità" o "falsa", e per i numeri 0 (e NaN) significa false , tutto il resto è true . Quindi potresti scrivere:

if ($(selector).length)

Non hai bisogno di quella >0 parte.


In realtà, il modo più rapido e semantico di autoispermazione per verificare l'esistenza è utilizzando semplicemente JavaScript:

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

È un po 'più lungo da scrivere rispetto all'alternativa di lunghezza jQuery, ma viene eseguito più velocemente poiché si tratta di un metodo JS nativo.

Ed è meglio dell'alternativa di scrivere la tua funzione jQuery. Questa alternativa è più lenta, per le ragioni indicate da @snover. Ma darebbe anche agli altri programmatori l'impressione che la funzione exists () sia qualcosa di inerente a jQuery. JavaScript dovrebbe / dovrebbe essere compreso dagli altri che modificano il tuo codice, senza un maggiore debito di conoscenza.

NB: Si noti la mancanza di un "#" prima di element_id (poiché questo è semplice JS, non jQuery).


Mi piace usare plain vanilla javascript per farlo.

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

Mi sono imbattuto in questa domanda e mi piacerebbe condividere uno snippet di codice che attualmente utilizzo:

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

E ora posso scrivere un codice come questo -

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

Potrebbe sembrare un sacco di codice, ma quando è scritto in CoffeeScript è piuttosto piccolo:

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

Non c'è bisogno di jQuery

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

Non c'è davvero bisogno di jQuery. Con JavaScript semplice è più facile e semanticamente corretto verificare:

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

Se per qualsiasi motivo non si desidera inserire un id per l'elemento, è comunque possibile utilizzare qualsiasi altro metodo JavaScript progettato per accedere al DOM.

jQuery è davvero bello, ma non lasciare che il puro JavaScript cada nel dimenticatoio ...


Prova a provare per l'elemento DOM

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

Puoi salvare alcuni byte scrivendo:

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

Questo funziona perché ogni oggetto jQuery si maschera anche come array, quindi possiamo usare l'operatore di dereferenziazione dell'array per ottenere il primo elemento dall'array . Restituisce un valore undefined se non esiste alcun elemento nell'indice specificato.


Puoi usare:

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

Un po ' più elegante, forse.


Questo plugin può essere utilizzato in un'istruzione if come if ($(ele).exist()) { /* DO WORK */ } o usando un callback.

Collegare

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

È possibile specificare uno o due callback. Il primo sparerà se l'elemento esiste, il secondo sparerà se l'elemento non esiste. Tuttavia, se si sceglie di passare solo una funzione, verrà attivata solo quando l'elemento esiste. Pertanto, la catena morirà se l'elemento selezionato non esiste. Ovviamente, se esiste, la prima funzione sparerà e la catena continuerà.

Tieni presente che l'uso della variante di callback aiuta a mantenere la concatenabilità : l'elemento viene restituito e puoi continuare a concatenare i comandi come con qualsiasi altro metodo jQuery!

Esempi di utilizzo

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

Se hai usato

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

implicherebbe che il concatenamento fosse possibile quando non lo è.

Questo sarebbe meglio:

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

In alternativa, dalle FAQ :

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

Puoi anche usare quanto segue. Se non ci sono valori nell'array di oggetti jQuery, ottenere il primo elemento nell'array restituirà undefined.

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

Sto usando questo:

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

Esegui la catena solo se esiste un elemento jQuery - http://jsfiddle.net/andres_314/vbNM3/2/


questo è molto simile a tutte le risposte, ma perché non usare il ! operatore due volte in modo da poter ottenere un booleano:

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

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

$.contains() cosa vuoi?

jQuery.contains( container, contained )

Il metodo $.contains() restituisce true se l'elemento DOM fornito dal secondo argomento è un discendente dell'elemento DOM fornito dal primo argomento, indipendentemente dal fatto che si tratti di un figlio diretto o nidificato più profondamente. Altrimenti, restituisce false. Sono supportati solo i nodi degli elementi; se il secondo argomento è un nodo di testo o commento, $.contains() restituirà false.

Nota : il primo argomento deve essere un elemento DOM, non un oggetto jQuery o un oggetto JavaScript semplice.


$("selector" ) fornisce un oggetto che ha dati di length . Se ci sono elementi come si definiscono nel selettore, li si otterrà dall'oggetto. Quindi se controlli la lunghezza che puoi già trovare, esiste qualche elemento. In javascript 0 == false anche null == false . Se non ottieni 0 tuoi codici verranno eseguiti.

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

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




jquery