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

2778

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

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

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

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

Джейк МакГроу
источник

Ответы:

2490

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

if ($(selector).length)

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

Тим Бюте
источник
52
@ abhirathore2006 Если вы используете селектор идентификатора, а элемент не существует, длина равна 0 и не вызывает исключений.
Роберт
14
Интересно NaN != false.
Роберт
35
@ Роберт и [] + []= ""... ааа, я люблю javascript
Джеймс
9
@James Это потому что [].toString() === [].join(',') === ""и "" === "".
Исмаэль Мигель
5
@ Роберт иtypeof NaN == 'number'
Ориадам
1356

Да!

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

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

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

Джейк МакГроу
источник
254
Я просто пишу: if ($ (селектор) .length) {...} без '> 0'
vsync
369
Ваш $.fn.existsпример заменяет поиск свойства (дешево!) Двумя вызовами функций, которые намного дороже, и один из этих вызовов функций воссоздает объект jQuery, который у вас уже есть, что просто глупо.
С Snover
212
@redsquare: удобочитаемость кода - лучшее обоснование для добавления такого рода функций в jQuery. Если что-то вызывать, то .existsчитается чисто, тогда как .lengthчитается как что-то семантически другое, даже если семантика совпадает с идентичным результатом.
Бен Зотто
48
@quixoto, извините, но .length - это стандарт для многих языков, который не нуждается в переносе. Как еще вы интерпретируете. Длина?
красный квадрат
144
На мой взгляд, это как минимум одно логическое отклонение от понятия «длина списка больше нуля» до понятия «элемент (ы), для которых я написал селектор для существования». Да, технически это одно и то же, но концептуальная абстракция находится на другом уровне. Это приводит к тому, что некоторые люди предпочитают более явный показатель даже при некоторых затратах на производительность.
Бен Зотто
377

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

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 */ }
Джон Эриксон
источник
11
Первый способ читается лучше. $ ("a"). exist () читается как "если существуют элементы <a>." $ .exists ("a") читается как "если существуют элементы <a>."
Страгер
16
правда, но опять же, вы подразумеваете, что связывание возможно, и если бы я попытался сделать что-то вроде $ (selector) .exists (). css ("color", "red"), это бы не сработало, и тогда я бы = * (
Джон Эриксон
19
Уже есть методы, которые не являются цепочечными, например, функции attr и data. Хотя я понимаю вашу точку зрения и, для чего бы это ни стоило, я просто проверяю длину> 0 в любом случае.
Мэтью Крамли
39
С какой стати вы должны это зацепить? $(".missing").css("color", "red")уже делает правильные вещи ... (т.е. ничего)
Бен Бланк
15
То, что связано с цепочкой, полностью завершено - существует множество$.fn методов jQuery, которые возвращают что-то отличное от нового объекта jQuery и, следовательно, не связываются.
Альнитак
136

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

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

// if element does not exist
if(!$('selector').length){ /* do something */ }
Янни
источник
134
Разве вы не видели, что Тим Бюте уже дал этот ответ за 2 года до вас?
Th4t Guy
101
Пфф, Тим никогда не показывал, как проверить, если элемент не существует.
Джереми W
1
Вы имеете в виду жизнь "еще"? Мой вопрос такой: эээ, он должен существовать или селектор не совпадает. Длина лишняя.
RichieHH
26
В этом ответе и комментариях подводится итог того, как работает stackoverflow
aswzen
101

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

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

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

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

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

Магне
источник
56
Совершенно не то же самое. Селекторы JQuery могут использоваться для любого правила CSS - например $('#foo a.special'). И он может вернуть более одного элемента. getElementByIdне могу начать приближаться к этому.
kikito
7
Вы правы в том, что это не так широко применимо, как селекторы. Тем не менее, он выполняет свою работу довольно хорошо в наиболее распространенном случае (проверка наличия единственного элемента). Аргументы самообъяснения и скорости все еще стоят.
Магне
29
@Noz if(document.querySelector("#foo a.special"))будет работать. Нет необходимости JQuery.
Голубое небо
34
Аргумент скорости в движках JS мертв только в сознании людей, которые не могут функционировать без jQuery, поскольку это аргумент, который они не могут победить.
Голубое небо
22
Помните старые добрые времена, когда document.getElementById был всем, что у нас было? И я всегда забывал документ. и не мог понять, почему это не сработало. И я всегда пишу это неправильно и неправильно делаю регистр символов.
JustJohn
73

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

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

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

Салман А
источник
1
Я пришел сюда, чтобы опубликовать этот точный ответ ... обязательная скрипка: jsfiddle.net/jasonwilczak/ekjj80gy/2
JasonWilczak
3
@JasonWilczak Не хотите прокомментировать, почему бы вместо этого: .eq [0] или .first () ссылаться на первый найденный элемент, а не на приведение типа?
Жан Поль AKA el_vete
5
Нет, jQuery.first()или jQuery.eq(0)оба возвращают объекты, объекты являются правдивыми, даже если они пустые. Этот пример должен проиллюстрировать, почему эти функции нельзя использовать как есть:if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists")
Salman A
1
Правильный. .eq(0)возвращает просто еще один объект jQuery, усеченный до длины 1 или 0. .first()Это просто удобный метод для .eq(0). Но .get(0)возвращает первый элемент DOM или undefinedи так же, как [0]. Первый элемент DOM в объекте jQuery хранится в свойстве обычного объекта с именем '0'. Это простой доступ к свойству. Единственное приведение типов происходит от неявного преобразования числа 0в строку '0'. Так что, если приведение типов является проблемой, вы можете использовать $.find(selector)['0']вместо этого.
Роберт
66

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

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

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

Девон
источник
38
Это слишком много для такой простой вещи. см. Тим Бюте ответ
vsync
Это правильный ответ. Проблема метода length заключается в том, что он дает ложное срабатывание для любого числа, например: $ (666) .length // возвращает 1, но это недопустимый селектор
earnaz
Это очень дорого для очень простой задачи. Просто посмотрите на реализацию jquery if .is (), и вы увидите, сколько кода нужно обработать, чтобы ответить на этот простой вопрос. Также неясно, что именно вы хотите сделать, поэтому это то же самое или, возможно, менее элегантное решение, о котором идет речь.
micropro.cz
1
@earnaz отличный момент, хороший улов. Я не понимаю, где это на самом деле стоит беспокоиться, хотя. Разработчики, идентифицирующие элементы, 666вероятно, имеют множество других причин, по которым их код не работает. Хотя это недопустимый селектор, $ (666) .length является допустимым javascript : он оценивается как правдивый и поэтому должен удовлетворять условию.
Тодд
@earnaz, чтобы избежать этого конкретного случая, $.find(666).lengthработает.
Эмиль Бержерон
66

Этот плагин можно использовать в 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    */
    }
})
SpYk3HH
источник
1
На версии обратного вызова, не должен ли Has Itemsобратный вызов фактически передать объект в качестве аргумента?
Крис Марисик
62

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

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

Это проверит длину и тип, теперь вы можете проверить это следующим образом:

$(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
Алиреза
источник
55

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

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

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

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

amypellegrini
источник
5
Я знаю: он не отвечает непосредственно на исходный вопрос (который запрашивает функцию jquery), но в этом случае ответом будет «Нет» или «не семантически правильное решение».
amypellegrini
Что если вам нужен родительский селектор :has()?
Константин Ван
54

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

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

if($(selector).exists()){/*do something*/}
Амитабха
источник
43

Причина, по которой все предыдущие ответы требуют этот .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);
technosaurus
источник
40

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

jQuery.contains( container, contained )

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

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

HiWay
источник
3
Это не принимает селектор, что означает, что он должен будет выбрать его, что означает, что он может просто проверить результат своего выбора.
39

Я обнаружил, 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
Олег
источник
12
Как часто вы вызываете $()пустой объект в качестве аргумента?
nnnnnn
@nnnnnn На самом деле никогда (я больше не использую jQuery). Но я предполагаю, что 3 года назад у меня был случай предоставления API, который бы брал селектор и возвращал количество элементов для этого селектора. Если другой разработчик передаст пустой объект, он неправильно ответит 1.
Олег
3
Почему на земле вы бы передать пустой объект {}в $()?
Все работники важны
7
@cpburnz почему ты меня спрашиваешь? Я был просто провайдером API ... Люди передают API всякие глупости.
Олег
4
Только что заметил, поток вопросов jquery, на который ссылается @FagnerBrack, был обновлен вскоре после его комментария; похоже, он не уйдет в конце концов.
Джозеф Габриэль
38

Вы можете проверить наличие или отсутствие элемента в 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
}
Анураг Деокар
источник
4
Вам не нужно проверять, что длина погоды больше 0, если ($ ('# elementid'). Length) {} будет достаточно.
Пранав Лабе
13
Вы на самом деле читали вопрос? Это точно такой же метод, который использует OP.
A1rPun
34

Проверка существования элемента четко документирована на самом официальном сайте jQuery!

Используйте свойство .length коллекции jQuery, возвращаемой вашим селектором:

if ($("#myDiv").length) {
    $("#myDiv").show();
}

Обратите внимание, что не всегда необходимо проверять, существует ли элемент. Следующий код покажет элемент, если он существует, и ничего не сделает (без ошибок), если он не существует:

$("#myDiv").show();
Тилак Мэдди
источник
31

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

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

if ($(selector).exists()) {
    // the element exists, now what?...
}
Сантьяго Эрнандес
источник
2
Потому что иногдаBoolean(x) может быть более эффективным.
28
$(selector).length && //Do something
SJG
источник
19
Я ненавижу эти умные способы избегать использования там, ifгде ifони улучшат читабельность за счет 2 байтов.
Эмиль Бержерон
Плюс, минифайеры сделают все это &&для вас.
27

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

if (!!$(selector)[0]) // do stuff
guest271314
источник
27

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

$.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 это, кажется, желаемый результат .

Оливер
источник
26

Нет необходимости в 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

Pawel
источник
25

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

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}
Сану Утхайя Боллера
источник
23

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

$.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
Eternal1
источник
9
Я нахожу оригинальный подход OP не только намного более минималистичным, но и более элегантным, чем этот. Похоже, излишне писать столько кода, когда метод OP короче и не требует обратных вызовов.
Лев
Для простых случаев - вы правы. Но для более сложных ситуаций, связанных с большим количеством кода в обоих случаях, я думаю, что мой подход лучше.
Eternal1
4
В какой сложной ситуации этот подход будет лучше, чем простое утверждение if / else?
Jarvl
19

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

// 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;
};
jcreamer898
источник
18

Как насчет:

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

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

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

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

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

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

andy_314
источник
14

Вот мой любимый 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
    }
);
ducdhm
источник
14

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

if($("selector").length){
   //code in the case
} 
Камуран Сёнечек
источник
5
«дать массив» - нет, это не так. Он дает вам объект jQuery (который разделяет некоторые свойства с массивом). Ваш ответ по сути такой же, как и у Тима Бюте из 2009 года.
Квентин,
11

Вот полный пример различных ситуаций и способ проверить, существует ли элемент, используя 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
abhirathore2006
источник
Вы можете попробовать $ ("# xysyxxs") в своем отладчике, вы увидите, что jquery не возвращает null или undefined. Таким образом, окончательное решение не будет работать
Béranger
11

Вам не нужно проверять, больше ли оно, чем 0нравится $(selector).length > 0, $(selector).lengthдостаточно и элегантного способа проверить наличие элементов. Я не думаю, что стоит написать функцию только для этого, если вы хотите сделать больше лишних вещей, да.

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}
Андрей Тодорут
источник