javascript - w3schools - Existe uma função “existe” para jQuery?




jquery w3schools (20)

Como posso verificar a existência de um elemento no jQuery?

O código atual que tenho é este:

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

Existe uma maneira mais elegante de abordar isso? Talvez um plugin ou uma função?


É $.contains() que você quer?

jQuery.contains( container, contained )

O método $.contains() retorna true se o elemento DOM fornecido pelo segundo argumento for um descendente do elemento DOM fornecido pelo primeiro argumento, seja um filho direto ou aninhado mais profundamente. Caso contrário, retorna falso. Apenas nós de elemento são suportados; se o segundo argumento for um nó de texto ou comentário, $.contains() retornará false.

Nota : O primeiro argumento deve ser um elemento DOM, não um objeto jQuery ou um objeto JavaScript simples.


A maneira mais rápida e mais auto explicativa de verificar a existência é, na verdade, usar JavaScript simples:

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

É um pouco mais longo para escrever do que a alternativa de comprimento do jQuery, mas executa mais rápido, pois é um método JS nativo.

E é melhor que a alternativa de escrever sua própria função jQuery. Essa alternativa é mais lenta, pelas razões apontadas pelo @snover. Mas também daria a outros programadores a impressão de que a função exists () é algo inerente ao jQuery. JavaScript seria / deveria ser entendido por outros editando seu código, sem aumentar o débito do conhecimento.

NB: Observe a falta de um '#' antes do element_id (já que este é JS simples, não o jQuery).


Aqui está o meu método favorito em jQuery

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

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

e outra versão que suporta retorno de chamada quando o seletor não existe

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

Exemplo:

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

E se:

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

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

É muito mínimo e evita que você tenha que colocar o seletor com $() todas as vezes.


Este plugin pode ser usado em uma instrução if como if ($(ele).exist()) { /* DO WORK */ } ou usando um callback.

Plugar

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

Você pode especificar um ou dois retornos de chamada. O primeiro será disparado se o elemento existir, o segundo será acionado se o elemento não existir. No entanto, se você escolher passar apenas uma função, ela só será disparada quando o elemento existir. Assim, a cadeia morrerá se o elemento selecionado não existir. Claro que, se existir, a primeira função será disparada e a cadeia continuará.

Tenha em mente que o uso da variante de retorno de chamada ajuda a manter a capacidade de cadeia - o elemento é retornado e você pode continuar encadeando comandos como com qualquer outro método jQuery!

Exemplo usa

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

Eu apenas gosto de usar o javascript simples de baunilha para fazer isso.

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

Eu estou usando isso:

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

Execute a cadeia somente se existir um elemento jQuery - http://jsfiddle.net/andres_314/vbNM3/2/


Eu tive um caso onde eu queria ver se um objeto existe dentro de outro, então eu adicionei algo à primeira resposta para verificar se há um seletor dentro do seletor.

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

Eu vejo a maioria das respostas aqui não são precisas como deveriam ser, eles verificam o comprimento do elemento, pode ser OK em muitos casos, mas não 100%, imagine se o número passar para a função, então protótipo de uma função que verifica todos condições e devolver a resposta como deveria ser:

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

Isto irá verificar tanto o comprimento e tipo, agora você pode verificar desta forma:

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

Inspirado pela resposta da hiway, desenvolvi o seguinte:

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

$.contains() usa dois elementos DOM e verifica se o primeiro contém o segundo.

Usar document.documentElement como o primeiro argumento preenche a semântica do método exists quando queremos aplicá-lo unicamente para verificar a existência de um elemento no documento atual.

Abaixo, eu coloquei um trecho que compara jQuery.exists() com as abordagens $(sel)[0] e $(sel).length , ambas retornando valores truthy para $(4) enquanto $(4).exists() retorna false . No contexto da verificação da existência de um elemento no DOM, esse parece ser o resultado desejado .

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


Não há necessidade de jQuery realmente. Com o JavaScript simples, é mais fácil e semanticamente correto verificar:

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

Se, por algum motivo, você não quiser colocar um ID no elemento, ainda poderá usar qualquer outro método JavaScript projetado para acessar o DOM.

jQuery é muito legal, mas não deixe o JavaScript puro cair no esquecimento ...


Se você usou

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

você implicaria que o encadeamento era possível quando não é.

Isso seria melhor:

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

Alternativamente, a partir do FAQ :

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

Você também pode usar o seguinte. Se não houver valores no array de objetos jQuery, obter o primeiro item no array retornará indefinido.

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

Tente testar para o elemento DOM

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

Você não precisa verificar se ele é maior que 0 como $(selector).length > 0 , $(selector).length é o suficiente e uma maneira elegante de verificar a existência de elementos. Eu não acho que vale a pena escrever uma função apenas para isso, se você quiser fazer mais coisas extras, sim.

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

Você pode usar isto:

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

Você pode usar:

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

Um pouco mais elegante, talvez.


Você poderia usar isto:

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

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

isso é muito parecido com todas as respostas, mas por que não usar o ! operador duas vezes para que você possa obter um booleano:

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

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

$("selector" ) dá um objeto que tem dados de length . Se houver elementos como você define no seletor, você os obterá do objeto. Então, se você verificar o comprimento que você já pode encontrar, existe algum elemento. Em javascript 0 == false também null == false . Se você não receber 0 seus códigos serão executados.

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

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




jquery