Jak mogę sprawdzić istnienie elementu w jQuery?

Bieżący kod, który mam, to:

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

Czy istnieje bardziej elegancki sposób na podejście? Być może wtyczka lub funkcja?

2871
Jake McGraw 27 sierpień 2008, 23:49

29 odpowiedzi

Najlepsza odpowiedź

W JavaScript wszystko jest "prawdawym" lub "falsja", a dla liczb 0 (i NAN) oznacza false, wszystko inne true. Więc mógłbyś napisać:

if ($(selector).length)

Nie potrzebujesz tej części >0.

2561
MartinNajemi 22 czerwiec 2020, 07:57

Tak!

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

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

Jest to w odpowiedzi na: Podcast Kod Herding z Jeff Atwood

1375
Jake McGraw 13 luty 2017, 22:37

Możesz użyć tego:

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

// if element does not exist
if(!$('selector').length){ /* do something */ }
139
Derek 朕會功夫 29 czerwiec 2016, 04:43

Najszybszy i najbardziej semantycznie wyjaśniający sposób sprawdzenia, aby istnienie jest faktycznie przy użyciu zwykłego JavaScript:

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

Nieco dłużej pisać niż alternatywa jquery, ale wykonuje szybciej, ponieważ jest to metoda natywna JS.

I jest lepiej niż alternatywa napisania własnego funkcji {X0}}. Ta alternatywa jest wolniejsza, z powodów @SNover stwierdził. Ale dałoby też innym programistom wrażenie, że funkcja exists() jest czymś nieodłącznym dla jQuery. JavaScript byłoby zrozumiałe przez inne edytujące kod, bez zwiększonego długu wiedzy.

NB: Zwróć uwagę na brak "#" przed element_id (ponieważ jest to zwykły JS, a nie {X1}}).

106
Randika Vishman 9 luty 2019, 03:48

Możesz zapisać kilka bajtów, pisząc:

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

Działa to, ponieważ każdy obiekt jQuery także maskarady jako tablica, więc możemy użyć operatora dewelowania tablicy, aby uzyskać pierwszy element z tablicy . Zwraca undefined, jeśli nie ma przedmiotu w określonym indeksie.

75
Salman A 18 styczeń 2014, 09:04

Możesz użyć:

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

mały bardziej elegancki, może.

68
Devon 17 wrzesień 2008, 17:53

Ta wtyczka może być używana w instrukcji if jak if ($(ele).exist()) { /* DO WORK */ } lub za pomocą wywołania zwrotnego.

Podłącz

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

Możesz określić jedną lub dwie połączenia zwrotne. Pierwszy wystąpi, jeśli element istnieje, drugi będzie strzelający, jeśli element ma nie istnieje. Jeśli jednak zdecydujesz się przekazać tylko jedną funkcję, będzie on tylko ogień, gdy element istnieje. Tak więc łańcuch umrze, jeśli wybrany element ma nie istnieje. Oczywiście, jeśli istnieje, pierwsza funkcja będzie ogień, a łańcuch będzie kontynuowany.

Należy

Przykładowe zastosowania.

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    */
    }
})
68
22 revs, 6 users 64% 12 czerwiec 2016, 09:10

Widzę większość odpowiedzi tutaj są nie dokładne , jak powinny być, sprawdzają długość elementu, może być OK w wielu przypadkach, ale nie 100% , wyobraź sobie, jeśli numer przejdzie do funkcji, więc prototypuj funkcję, która sprawdza wszystkie warunki i zwrócić odpowiedź, jak powinno być:

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

Sprawdzi to zarówno długość, jak i typ, teraz możesz to sprawdzić w ten sposób:

$(1980).exists(); //return false
$([1,2,3]).exists(); //return false
$({name: 'stackoverflow', url: 'http://www.stackoverflow.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
67
Alireza 17 lipiec 2019, 11:59

Możesz użyć tego:

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

if($(selector).exists()){/*do something*/}
58
Bellash 15 marzec 2016, 07:46

Nie ma naprawdę potrzeby dla jQuery. Z prostym javascript jest łatwiejsze i semantycznie poprawne, aby sprawdzić:

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

Jeśli z jakiegokolwiek powodu nie chcesz umieścić identyfikatora do elementu, nadal możesz używać dowolnej innej metody JavaScript, aby uzyskać dostęp do DOM.

JQuery jest naprawdę fajny, ale nie pozwól, aby czysty javascript wpadł w zapomnienie ...

57
Peter Mortensen 10 maj 2013, 07:48

Powodem, dla którego wszystkie poprzednie odpowiedzi wymagają parametru .length, jest to, że są one głównie korzystające z selektora jQuery's {X1}}, który ma queryselectorall za zasłonami (lub używają go bezpośrednio). Ta metoda jest raczej powolna, ponieważ musi przeanalizować całe drzewo Dom szuka wszystkie dopasowuje się do tego selektora i wypełnia z nimi tablicę.

Parametr ["Długość" jest nie jest potrzebny lub użyteczny, a kod będzie dużo szybszy, jeśli zamiast tego użyjesz document.querySelector(selector), ponieważ zwraca pierwszy element dopasowuje lub null, jeśli nie znaleziono.

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

Jednak ta metoda pozostawia nas z rzeczywistym zwracanym obiektem; Co jest w porządku, jeśli nie zostanie zapisana jako zmienna i wielokrotnie używana (trzymając w ten sposób odniesienie, jeśli zapomnimy).

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

W niektórych przypadkach może to być pożądane. Może być używany w takim pętli:

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

Jeśli nie potrzebujesz elementu i chcesz dostać / przechowywać tylko prawdziwe / false, po prostu nie podwajaj !! Działa na buty, które przychodzą niezwiązane, więc dlaczego tutaj węzeł?

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);
46
technosaurus 13 sierpień 2014, 05:24

Jest {x0}} co chcesz?

jQuery.contains( container, contained )

Metoda $.contains() zwraca TRUE, jeśli element DOM dostarczony przez drugiego argumentu jest potomkiem elementu Domu dostarczonego przez pierwszy argument, niezależnie od tego, czy jest to bezpośrednie dziecko ani zagnieżdżone. W przeciwnym razie zwraca fałsz. Obsługiwane są tylko węzły elementów; Jeśli drugi argument jest tekstem lub węzłem komentarza, $.contains() zwróci fałszywe.

Uwaga : Pierwszy argument musi być elementem DOM, a nie obiekt jQuery lub zwykłym obiektem JavaScript.

43
Community 20 czerwiec 2020, 09:12

Możesz sprawdzić element, jest obecny lub nie używany długości w skrypcie Java. Jeśli długość jest większa niż zero, element jest obecny, jeśli długość wynosi zero, a następnie element nie jest obecny

// 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
}
42
ROOT 20 luty 2020, 12:16

Znalazłem if ($(selector).length) {}, aby być niewystarczającym. Po cichu przerwie aplikację, gdy selector jest pustym obiektem {}.

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

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

Moją jedyną sugestią jest wykonanie dodatkowego sprawdzenia dla {}.

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

Nadal szukam lepszego rozwiązania, ponieważ ten jest nieco ciężki.

Edytuj: Ostrzeżenie! To nie działa w IE, gdy selector jest ciągiem.

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
41
Oleg 7 luty 2012, 17:43

Jest to bardzo podobne do wszystkich odpowiedzi, ale dlaczego nie używać operatora {x0}}}, dzięki czemu można uzyskać logiczne:

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

if ($(selector).exists()) {
    // the element exists, now what?...
}
32
Santiago Hernández 4 maj 2015, 03:31
$(selector).length && //Do something
29
SJG 28 maj 2012, 12:58

Wypróbuj testowanie elementu DOM

if (!!$(selector)[0]) // do stuff
28
guest271314 9 sierpień 2015, 02:55

Zainspirowany Odpowiedź Hiway wymyśliłem następujące:

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

jQuery.Contains bierze dwa elementy DOM i sprawdza, czy pierwszy zawiera drugi.

Używanie document.documentElement jako pierwszy argument spełnia semantykę metody exists, gdy chcemy stosować go wyłącznie, aby sprawdzić istnienie elementu w bieżącym dokumencie.

Poniżej umieściłem fragment, który porównuje jQuery.exists() w stosunku do $(sel)[0] i $(sel).length } Zwraca false. W kontekście Sprawdzanie istnienia elementu w Domu wydaje się być pożądany wynik .

$.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>
28
Community 23 maj 2017, 11:47

Nie ma potrzeby jQuery (podstawowe rozwiązanie)

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

Znacznie bardziej wydajna opcja poniżej (powiadomienie brak kropki przed klasą).

if(document.getElementsByClassName('a-class')[0]) {
  // do something
}

QuerySelector używa odpowiedniego dopasowanego silnika jak $ () (Sizzle) w jQuery i wykorzystuje więcej mocy obliczeniowej, ale w 99% przypadków będzie dobrze. Druga opcja jest bardziej jawna i mówi kod dokładnie co robić. Znacznie jest znacznie szybszy w zależności od JSPERF https://jsperf.com/getelementsbyClassname-vs-queryselectorall/25 .

28
Pawel 17 lipiec 2019, 14:43

Po prostu lubię używać zwykłej wanilii JavaScript, aby to zrobić.

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}
26
Sanu Uthaiah Bollera 18 czerwiec 2016, 22:37

Natknąłem się na to pytanie i chciałbym podzielić się fragmentem Kodeksu, którego obecnie używam:

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

A teraz mogę pisać takie kod -

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

Może wydawać się dużo kodu, ale po napisaniu kawiarni jest dość mały:

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists
24
Eternal1 16 kwiecień 2015, 09:17

Miałem przypadek, w którym chciałem zobaczyć, czy obiekt istnieje w drugiej stronie, więc dodałem coś do pierwszej odpowiedzi, aby sprawdzić selektor wewnątrz selektora ..

// 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;
};
20
jcreamer898 5 kwiecień 2012, 21:02

Co powiesz na:

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

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

Jest to bardzo minimalne i oszczędza, że za każdym razem należy dołączyć selektor za pomocą $().

19
GSTAR 4 marzec 2014, 21:15

Używam tego:

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

Wykonaj łańcuch tylko wtedy, gdy istnieje element jQuery - http://jsfiddle.net/andres_314/vbnm3/2/

16
andy_314 1 sierpień 2012, 21:56

$("selector") Zwraca obiekt, który ma właściwość length. Jeśli selektor znajdzie dowolne elementy, zostaną one zawarte w obiekcie. Więc jeśli sprawdzisz jego długość, możesz sprawdzić, czy istnieją jakieś elementy. W javascript 0 == false, więc jeśli nie otrzymasz 0 Twój kod będzie uruchomiony.

if($("selector").length){
   //code in the case
} 
16
Hydrothermal 3 styczeń 2019, 10:00

Oto moja ulubiona metoda exist w jQuery

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

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

I inna wersja, która obsługuje zwrotnie połączenia, gdy selektor nie istnieje

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

Przykład:

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);
15
ducdhm 8 marzec 2016, 17:06

Nie musisz sprawdzać, czy jest większy niż 0 jak $(selector).length > 0, $(selector).length to wystarczy i elegancki sposób sprawdzić istnienie elementów. Nie sądzę, że warto napisać funkcję tylko dla tego, jeśli chcesz zrobić więcej dodatkowych rzeczy, tak.

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}
14
Community 29 wrzesień 2020, 01:10

Oto pełny przykład różnych sytuacji i sposobu sprawdzenia, czy element istnieje przy użyciu bezpośredniego, jeśli na selektorze jQuery może lub nie może działać, ponieważ zwraca tablicę lub elementy.

var a = null;

var b = []

var c = undefined ;

if(a) { console.log(" a exist")} else { console.log("a doesn't exit")}
// output: a doesn't exit

if(b) { console.log(" b exist")} else { console.log("b doesn't exit")}
// output: b exist

if(c) { console.log(" c exist")} else { console.log("c doesn't exit")}
// output: c doesn't exit

ostateczne rozwiązanie

if($("#xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
//output : xusyxxs doesnn't exist

if($(".xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
    //output : xusyxxs doesnn't exist
13
abhirathore2006 17 sierpień 2020, 07:54