Есть ли функция «существует» для jQuery?

Как я могу проверить существование элемента в jQuery?

Текущий код, который у меня есть, это:

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

Есть ли более элегантный способ подойти к этому? Возможно, плагин или функция?

27.08.2008 19:49:41
30 ОТВЕТОВ
РЕШЕНИЕ

В JavaScript все «правдиво» или «ложно», а для чисел 0(и NaN) означает falseвсе остальное true. Чтобы вы могли написать:

if ($(selector).length)

Вам не нужна эта >0часть.

2470
17.10.2016 14:52:46
@ abhirathore2006 Если вы используете селектор идентификатора, а элемент не существует, длина равна 0 и не вызывает исключений.
Robert 29.06.2017 20:35:22
Интересно NaN != false.
Robert 29.06.2017 20:52:47
@ Роберт и [] + []= ""... ааа, я люблю javascript
James 4.07.2017 15:55:09
@ Джеймс Это потому что [].toString() === [].join(',') === ""и "" === "".
Ismael Miguel 8.07.2017 22:09:38
@ Роберт иtypeof NaN == 'number'
oriadam 31.01.2018 11:06:28

Да!

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

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

Это в ответ на: подкаст Herding Code с Джеффом Этвудом

1355
13.02.2017 22:37:16
Я просто пишу: if ($ (селектор) .length) {...} без '> 0'
vsync 24.11.2009 09:22:59
Ваш $.fn.existsпример заменяет поиск свойства (дешево!) Двумя вызовами функций, которые намного дороже, и один из этих вызовов функций воссоздает объект jQuery, который у вас уже есть, что просто глупо.
C Snover 30.05.2010 04:14:28
@redsquare: удобочитаемость кода - лучшее обоснование для добавления такого рода функций в jQuery. Если что-то вызывать, то .existsчитается чисто, тогда как .lengthчитается как что-то семантически иное, даже если семантика совпадает с идентичным результатом.
Ben Zotto 2.08.2010 20:52:03
@quixoto, извините, но .length - это стандарт для многих языков, который не нуждается в переносе. Как еще вы интерпретируете. Длина?
redsquare 3.08.2010 00:13:13
На мой взгляд, это как минимум одно логическое отклонение от понятия «длина списка больше нуля» до понятия «элемент (ы), для которых я написал селектор для существования». Да, технически это одно и то же, но концептуальная абстракция находится на другом уровне. Это приводит к тому, что некоторые люди предпочитают более явный показатель даже при некоторых затратах на производительность.
Ben Zotto 3.08.2010 00:29:08

Вы можете использовать:

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

Чуть более элегантно, возможно.

66
17.09.2008 17:53:34
Это слишком много для такой простой вещи. см. Тим Бюте ответ
vsync 24.11.2009 09:28:43
Это правильный ответ. Проблема метода length заключается в том, что он дает ложное срабатывание для любого числа, например: $ (666) .length // возвращает 1, но это недопустимый селектор
earnaz 16.09.2015 16:23:49
Это очень дорого для очень простой задачи. Просто посмотрите на реализацию jquery if .is (), и вы увидите, сколько кода нужно обработать, чтобы ответить на этот простой вопрос. Также не совсем очевидно, что именно вы хотите сделать, поэтому оно такое же или, может быть, менее изящное, чем рассматриваемое решение.
micropro.cz 22.02.2016 19:59:36
@earnaz отличный момент, хороший улов. Я не понимаю, где это на самом деле стоит беспокоиться, хотя. Разработчики, идентифицирующие элементы, 666вероятно, имеют множество других причин, по которым их код не работает. Хотя это недопустимый селектор, $ (666) .length является допустимым javascript : он оценивается как правдивый и поэтому должен удовлетворять условию.
Todd 8.03.2016 12:55:51
@earnaz, чтобы избежать этого конкретного случая, $.find(666).lengthработает.
Emile Bergeron 8.10.2016 00:41:33

Если вы использовали

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

Вы подразумеваете, что цепочка была возможна, когда это не так.

Это было бы лучше:

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

В качестве альтернативы из FAQ :

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

Вы также можете использовать следующее. Если в массиве объектов jQuery нет значений, то получение первого элемента в массиве вернет undefined.

if ( $('#myDiv')[0] ) { /* Do something */ }
377
30.06.2015 08:09:35
Первый способ читается лучше. $ ("a"). exist () читается как "если существуют элементы <a>." $ .exists ("a") читается как "если существуют элементы <a>."
strager 14.01.2009 20:00:14
правда, но опять же, вы подразумеваете, что связывание возможно, и если бы я попытался сделать что-то вроде $ (selector) .exists (). css ("color", "red"), это бы не сработало, и тогда я бы = * (
Jon Erickson 15.01.2009 00:31:45
Уже есть методы, которые не являются цепочечными, например, функции attr и data. Хотя я понимаю вашу точку зрения и, для чего бы это ни стоило, я просто проверяю длину> 0 в любом случае.
Matthew Crumley 16.01.2009 05:42:56
С какой стати вы должны это зацепить? $(".missing").css("color", "red")уже делает правильные вещи ... (т.е. ничего)
Ben Blank 8.09.2010 06:43:48
То, что связано с цепочкой, полностью завершено - существует множество$.fn методов jQuery, которые возвращают что-то отличное от нового объекта jQuery и, следовательно, не связываются.
Alnitak 18.07.2014 08:12:46
if ( $('#myDiv').size() > 0 ) { //do something }

size() подсчитывает количество элементов, возвращаемых селектором

10
8.11.2009 06:42:16
@Furbeenator Я не знаю, откуда вы берете вашу информацию, но .size()ничего не делает, кроме как вернуться .length. Есть причина, по которой он устарел
Ian 3.06.2013 21:41:00
Вы правы, но вызов .length, являющийся свойством, требует немного меньших накладных расходов, чем вызов функции .size(). Виноват.
Furbeenator 5.06.2013 18:30:51

Вы можете использовать это:

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

// if element does not exist
if(!$('selector').length){ /* do something */ }
136
29.06.2016 04:43:15
Разве вы не видели, что Тим Бюте уже дал этот ответ за 2 года до вас?
Th4t Guy 31.07.2014 17:28:18
Пфф, Тим никогда не показывал, как проверить, если элемент не существует.
Jeremy W 5.08.2015 15:03:19
Вы имеете в виду жизнь "еще"? Мой вопрос такой: ошибаться, он должен существовать или селектор не совпадает. Длина лишняя.
RichieHH 2.07.2017 12:55:43
В этом ответе и комментариях подводится итог того, как работает stackoverflow
aswzen 3.04.2018 08:48:01

На самом деле нет необходимости в jQuery. С простым JavaScript легче и семантически правильно проверить:

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

Если по какой-либо причине вы не хотите добавлять идентификатор к элементу, вы все равно можете использовать любой другой метод JavaScript, предназначенный для доступа к DOM.

JQuery действительно крутой, но не позволяйте чистому JavaScript забыться ...

56
10.05.2013 07:48:47
Я знаю: он не отвечает непосредственно на исходный вопрос (который запрашивает функцию jquery), но в этом случае ответом будет «Нет» или «не семантически правильное решение».
amypellegrini 14.11.2011 14:24:32
Что если вам нужен родительский селектор :has()?
Константин Ван 24.06.2019 05:10:26

Самый быстрый и наиболее семантически понятный способ проверки существования на самом деле - это использование обычного JavaScript:

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

Это немного длиннее для записи, чем альтернатива длины jQuery, но выполняется быстрее, поскольку это нативный метод JS.

И это лучше, чем альтернатива написания собственной jQueryфункции. Эта альтернатива медленнее, по причинам, указанным @snover. Но это также создало бы у других программистов впечатление, что эта exists()функция присуща jQuery. JavaScriptбудут / должны быть поняты другими, редактирующими ваш код, без увеличения долга знаний.

NB: обратите внимание на отсутствие знака «#» перед element_id(так как это простой JS, а не jQuery).

100
9.02.2019 03:48:22
Совершенно не то же самое. Селекторы JQuery могут использоваться для любого правила CSS - например $('#foo a.special'). И он может вернуть более одного элемента. getElementByIdне могу начать подходить к этому.
kikito 7.03.2012 16:30:49
Вы правы в том, что это не так широко применимо, как селекторы. Тем не менее, он выполняет свою работу довольно хорошо в наиболее распространенном случае (проверка наличия единственного элемента). Аргументы самообъяснения и скорости все еще стоят.
Magne 10.05.2012 08:55:38
@Noz if(document.querySelector("#foo a.special"))будет работать. Нет необходимости JQuery.
Blue Skies 8.12.2013 00:43:53
Аргумент скорости в движках JS мертв только в уме людей, которые не могут функционировать без jQuery, поскольку это аргумент, который они не могут победить.
Blue Skies 8.12.2013 00:45:52
Помните старые добрые времена, когда document.getElementById был всем, что у нас было? И я всегда забывал документ. и не мог понять, почему это не сработало. И я всегда пишу это неправильно и неправильно делаю регистр символов.
JustJohn 18.11.2014 21:05:44

Я обнаружил, if ($(selector).length) {}что недостаточно. Это будет молча сломать ваше приложение, когда selectorпустой объект {}.

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

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

Мое единственное предложение - выполнить дополнительную проверку {}.

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

Я все еще ищу лучшее решение, хотя это немного тяжело.

Редактировать: ВНИМАНИЕ! Это не работает в IE, когда selectorэто строка.

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
39
7.02.2012 17:43:29
Как часто вы вызываете $()пустой аргумент в качестве аргумента?
nnnnnn 22.12.2014 11:24:56
@nnnnnn На самом деле никогда (я больше не использую jQuery). Но я предполагаю, что 3 года назад у меня был случай раскрытия API, который бы брал селектор и возвращал количество элементов для этого селектора. Если другой разработчик передаст пустой объект, он неправильно ответит 1.
Oleg 22.12.2014 15:03:51
Почему на земле вы бы передать пустой объект {}в $()?
user369450 26.03.2015 15:46:54
@cpburnz почему ты меня спрашиваешь? Я был просто поставщиком API ... Люди передают API всякие глупости.
Oleg 26.03.2015 15:48:19
Только что заметил, поток вопросов jquery, на который ссылается @FagnerBrack, был обновлен вскоре после его комментария; похоже, он не уйдет в конце концов.
Joseph Gabriel 18.04.2016 21:09:26

У меня был случай, когда я хотел посмотреть, существует ли объект внутри другого, поэтому я добавил что-то в первый ответ, чтобы проверить селектор внутри селектора.

// 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;
};
19
5.04.2012 21:02:46
$(selector).length && //Do something
28
28.05.2012 12:58:08
Я ненавижу эти умные способы избегать использования там, ifгде ifони улучшат читабельность за счет 2 байтов.
Emile Bergeron 8.10.2016 00:35:30
Плюс, минифайеры сделают все это &&для вас.
user7892745 22.05.2017 21:46:53

Я использую это:

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

Выполнять цепочку, только если существует элемент jQuery - http://jsfiddle.net/andres_314/vbNM3/2/

15
1.08.2012 21:56:05

Этот плагин можно использовать в ifвыражении типа if ($(ele).exist()) { /* DO WORK */ }или с помощью обратного вызова.

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

Вы можете указать один или два обратных вызова. Первый будет срабатывать, если элемент существует, второй будет срабатывать, если элемент не существует. Однако, если вы решите передать только одну функцию, она будет срабатывать только тогда, когда элемент существует. Таким образом, цепь умрет, если выбранный элемент не существует. Конечно, если она существует, первая функция сработает и цепочка продолжится.

Имейте в виду, что использование варианта обратного вызова помогает поддерживать цепочечность - элемент возвращается, и вы можете продолжить цепочку команд, как и с любым другим методом jQuery!

Пример использования

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    */
    }
})
66
12.06.2016 09:10:58
На версии обратного вызова, не должен ли Has Itemsобратный вызов фактически передать объект в качестве аргумента?
Chris Marisic 16.06.2016 17:46:29

Вы можете использовать это:

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

if($(selector).exists()){/*do something*/}
54
15.03.2016 07:46:58

Это $.contains()то, что вы хотите?

jQuery.contains( container, contained )

$.contains()Метод возвращает истину , если DOM элемент , предусмотренный вторым аргументом является потомком элемента DOM , предоставленного первым аргументом, является ли это прямым потомком или более глубоко вложенным. В противном случае возвращается false. Поддерживаются только узлы элементов; если второй аргумент является узлом текста или комментария, $.contains()вернет false.

Примечание . Первый аргумент должен быть элементом DOM, а не объектом jQuery или простым объектом JavaScript.

40
28.10.2018 09:57:41
Это не принимает селектор, что означает, что он должен будет выбрать его, что означает, что он мог просто проверить результат своего выбора.
user1106925 4.06.2016 13:28:17

Вы можете сохранить несколько байтов, написав:

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

Это работает, потому что каждый объект jQuery также маскируется как массив, поэтому мы можем использовать оператор разыменования массива, чтобы получить первый элемент из массива . Возвращается, undefinedесли в указанном индексе нет элемента.

72
18.01.2014 09:04:47
Я пришел сюда, чтобы опубликовать этот точный ответ ... обязательная скрипка: jsfiddle.net/jasonwilczak/ekjj80gy/2
JasonWilczak 25.03.2015 15:08:39
@JasonWilczak Не хотите прокомментировать, почему бы вместо этого: .eq [0] или .first () ссылаться на первый найденный элемент, а не на приведение типа?
Jean Paul A.K.A el_vete 21.07.2015 13:51:59
Нет, jQuery.first()или jQuery.eq(0)оба возвращают объекты, объекты являются правдивыми, даже если они пустые. Этот пример должен проиллюстрировать, почему эти функции нельзя использовать как есть:if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists")
Salman A 21.07.2015 15:16:01
Верный. .eq(0)возвращает просто еще один объект jQuery, усеченный до длины 1 или 0. .first()Это просто удобный метод для .eq(0). Но .get(0)возвращает первый элемент DOM или undefinedи так же, как [0]. Первый элемент DOM в объекте jQuery хранится в свойстве обычного объекта с именем '0'. Это простой доступ к свойству. Единственное приведение типов происходит от неявного преобразования числа 0в строку '0'. Так что, если приведение типов является проблемой, вы можете использовать $.find(selector)['0']вместо этого.
Robert 29.06.2017 20:20:19

Как насчет:

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

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

Это очень минимально и избавляет вас от необходимости включать селектор с $()каждым разом.

18
4.03.2014 21:15:45
Это читается как «если существует вещь» вместо «если вещь существует», которая if($("#thing").exists(){}читается как. Кроме того, это не способ JQuery.
1j01 21.06.2015 21:48:14

Я наткнулся на этот вопрос, и я хотел бы поделиться фрагментом кода, который я сейчас использую:

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

И теперь я могу написать такой код -

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

Может показаться, что кода много, но когда он написан на CoffeeScript, он довольно мал:

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists
23
16.04.2015 09:17:47
Я нахожу оригинальный подход OP не только намного более минималистичным, но и более элегантным, чем этот. Похоже, излишне писать столько кода, когда метод OP короче и не требует обратных вызовов.
Lev 5.08.2014 07:31:29
Для простых случаев - вы правы. Но для более сложных ситуаций, связанных с большим количеством кода в обоих случаях, я думаю, что мой подход лучше.
Eternal1 5.08.2014 07:38:51
В какой сложной ситуации этот подход будет лучше, чем простое утверждение if / else?
Jarvl 24.06.2016 18:55:05

Причина, по которой все предыдущие ответы требуют этот .lengthпараметр, заключается в том, что они в основном используют $()селектор jquery, у которого querySelectorAll находится за занавесом (или они используют его напрямую). Этот метод довольно медленный, потому что ему нужно проанализировать все дерево DOM, найти все совпадения с этим селектором и заполнить их массивом.

Параметр ['length'] не нужен и не полезен, и код будет намного быстрее, если document.querySelector(selector)вместо этого использовать его напрямую , поскольку он возвращает первый соответствующий элемент или ноль, если не найден.

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

Однако этот метод оставляет нас с фактическим возвращаемым объектом; что хорошо, если он не будет сохранен как переменная и использован повторно (таким образом, сохраняя ссылку, если мы забудем).

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

В некоторых случаях это может быть желательно. Его можно использовать в цикле for следующим образом:

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

Если вам на самом деле не нужен элемент и вы хотите получить / сохранить только значение true / false, просто удвойте его! Это работает для обуви, которая развязана, так почему узел здесь?

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);
43
13.08.2014 05:24:31

это очень похоже на все ответы, но почему бы не использовать !оператор дважды, чтобы вы могли получить логическое значение:

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

if ($(selector).exists()) {
    // the element exists, now what?...
}
31
4.05.2015 03:31:21
Потому что иногдаBoolean(x) может быть более эффективным.
user7892745 22.05.2017 21:47:29

Вы можете проверить наличие или отсутствие элемента в java-скрипте. Если длина больше нуля, то элемент присутствует, если длина равна нулю, то элемент отсутствует

// 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
}
38
20.02.2020 12:16:11
Вам не нужно проверять, что длина погоды больше 0, если ($ ('# elementid'). Length) {} будет достаточно.
Pranav Labhe 22.08.2015 11:22:53
Вы на самом деле читали вопрос? Это точно такой же метод, который использует OP.
A1rPun 16.03.2016 16:01:29

Попробуйте проверить DOMэлемент

if (!!$(selector)[0]) // do stuff
27
9.08.2015 02:55:59

Вдохновленный ответом хайвея, я придумал следующее:

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

jQuery.contains принимает два элемента DOM и проверяет, содержит ли первый элемент второй.

Использование document.documentElementв качестве первого аргумента удовлетворяет семантике existsметода, когда мы хотим применить его исключительно для проверки существования элемента в текущем документе.

Ниже я соединил фрагмент , который сравнивает jQuery.exists()против $(sel)[0]и $(sel).lengthподходов , которые возвращают truthyзначения в $(4)то время $(4).exists()возвращается false. В контексте проверки существования элемента в DOM это, кажется, желаемый результат .

27
23.05.2017 11:47:32

Вот мой любимый existметод в jQuery

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

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

и другая версия, которая поддерживает обратный вызов, когда селектор не существует

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

Пример:

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);
14
8.03.2016 17:06:55

$("selector") возвращает объект, который имеет lengthсвойство. Если селектор найдет какие-либо элементы, они будут включены в объект. Поэтому, если вы проверите его длину, вы увидите, существуют ли какие-либо элементы. В JavaScript 0 == false, так что если вы не получите 0ваш код будет работать.

if($("selector").length){
   //code in the case
} 
14
3.01.2019 10:00:49
«дать массив» - нет, это не так. Он дает вам объект jQuery (который разделяет некоторые свойства с массивом). Ваш ответ по сути такой же, как и у Тима Бюте из 2009 года.
Quentin 27.04.2016 12:33:17

Мне просто нравится использовать простой ванильный JavaScript для этого.

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}
25
18.06.2016 22:37:03

Да, лучший способ сделать это:

По JQuery:

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

selectorможет быть Element IDИЛИElement Class

ИЛИ

Если вы не хотите использовать jQueryбиблиотеку, вы можете добиться этого с помощью Core JavaScript:

По JavaScript:

if(document.getElementById("ElementID")) {
    //Do something...
}
10
26.07.2016 05:32:26
если «ElementID» не существует, он не выдаст ошибку в условии if?
Star 10.08.2017 13:20:14

Вот полный пример различных ситуаций и способ проверить, существует ли элемент, используя direct, если на jQuery селектор может или не может работать, потому что он возвращает массив или элементы.

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

ОКОНЧАТЕЛЬНОЕ РЕШЕНИЕ

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
11
15.10.2016 07:10:36
Вы можете попробовать $ ("# xysyxxs") в своем отладчике, вы увидите, что jquery не возвращает null или undefined. Таким образом, окончательное решение не будет работать
Béranger 9.09.2016 12:27:18

Используйте следующий синтаксис, чтобы проверить, существует ли элемент на самом деле, используя jQuery.

let oElement = $(".myElementClass");
if(oElement[0]) {
    // Do some jQuery operation here using oElement
}
else {
    // Unable to fetch the object
}
-2
8.10.2016 00:28:37

Нет необходимости в jQuery (базовое решение)

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

Гораздо более производительный вариант ниже (обратите внимание на отсутствие точки перед классом).

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

querySelector использует правильный механизм сопоставления, такой как $ () (sizzle) в jQuery, и использует больше вычислительной мощности, но в 99% случаев все будет в порядке. Второй вариант более явный и сообщает коду, что именно делать. Это намного быстрее, согласно jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25

26
17.07.2019 14:43:17