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

Да!

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

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

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

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

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

Возможно, маленький более элегантен.

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

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

if ( $('#myDiv').size() > 0 ) { //do something }

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

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

if ($(selector).length)

Вам не нужна эта деталь >0.

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

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

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

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

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

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

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

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

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

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

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

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

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

var $target = $({});        
console.info($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

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

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

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

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

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

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

Плагин

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

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

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

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

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

jQuery.contains( container, contained )

The $.contains() method returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply. Otherwise, it returns false. Only element nodes are supported; if the second argument is a text or comment node, $.contains() will return false.

Note: The first argument must be a DOM element, not a jQuery object or plain JavaScript object.

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

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

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

Как насчет:

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

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

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

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

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

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

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

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.info(elementIfExists("#myid")); /* null */
console.info(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;

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

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

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

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

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

Вы можете проверить, присутствует ли элемент или нет, используя длину в 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
}

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

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

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

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

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

Вот мой любимый метод 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
    }
);

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

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

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

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

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

По JQuery:

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

selector может быть ElementID ИЛИ ElementClass

ИЛИ ЖЕ

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

По JavaScript:

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

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

var a = null;

var b = []

var c = undefined ;

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

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

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

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

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

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

Демо

console.info("existing id", $('#id-1').length)
console.info("non existing id", $('#id-2').length)

console.info("existing class single instance", $('.cls-1').length)
console.info("existing class multiple instance", $('.cls-2').length)
console.info("non existing class", $('.cls-3').length)

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "id-1">
  <div class = "cls-1 cls-2"></div>
  <div class = "cls-2"></div>
</div>

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

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

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

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

Use the .length property of the jQuery collection returned by your selector:

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

Note that it isn't always necessary to test whether an element exists. The following code will show the element if it exists, and do nothing (with no errors) if it does not:

$("#myDiv").show();

Я вижу, что большинство ответов здесь - это не точный, как и должно быть, они проверяют длину элемента, во многих случаях это может быть Ok, но не 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

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

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

Простая служебная функция как для идентификатора, так и для селектора класса.

function exist(IdOrClassName, IsId) {
  var elementExit = false;
  if (IsId) {
    elementExit = $("#" + "" + IdOrClassName + "").length ? true : false;
  } else {
    elementExit = $("." + "" + IdOrClassName + "").length ? true : false;
  }
  return elementExit;
}

вызов этой функции, как показано ниже

$(document).ready(function() {
  $("#btnCheck").click(function() {
    //address is the id so IsId is true. if address is class then need to set IsId false
    if (exist("address", true)) {
      alert("exist");
    } else {
      alert("not exist");
    }
  });
});

Все ответы: нет работает пуленепробиваемый, чтобы проверить наличие элемента в jQuery. После многих лет кодирования только это решение не выдает никаких предупреждений о существовании или отсутствии:

if ($(selector).get(0)) { // Do stuff }

Или вместо этого внести залог в начале вашей функции:

if (!$(selector).get(0)) return;

Объяснил

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

Вход не будет иметь значения, если он не существует. Попробуй это...

if ($(selector).val())

Попробуй это.

просто и короткая и можно использовать во всем проекте:

jQuery.fn.exists=function(){return !!this[0];}; //jQuery Plugin

Использование:

console.info($("element-selector").exists());

_________________________________

ИЛИ ДАЖЕ КОРОЧЕ: (когда вы не хотите определять плагин jQuery):

if (!!$("elem-selector")[0]) ...;

или даже

if ($("elem-selector")[0]) ...;

Используйте querySelectorAll с forEach, нет необходимости в if и дополнительном назначении:

document.querySelectorAll('.my-element').forEach((element) => {
  element.classList.add('new-class');
});

как противоположность:

const myElement = document.querySelector('.my-element');
if (myElement) {
  element.classList.add('new-class');
}

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

 if ($("#element").length > 0){
   //the element exists in the page, you can do the rest....
 }

Найти элемент очень просто и легко.

Просто проверьте длину селектора, если она больше 0, то она вернет true, в противном случае - false.

Для ID:

 if ( $('#selector').length )         // use this if you are using id to check
{
     // it exists
}

Для класса:

 if ( $('.selector').length )         // use this if you are using class to check
{
     // it exists
}

Для раскрывающегося списка:

if ( $('#selector option').size() ) {   // use this if you are using dropdown size to check

   // it exists
}

С jQuery вам не нужен >0, это все, что вам нужно:

if ($(selector).length)

С vanilla JS вы можете сделать то же самое с:

if (document.querySelector(selector))

Если вы хотите превратить его в функцию, возвращающую bool:

const exists = selector => !!document.querySelector(selector);

if (exists(selector)){
  // some code
}

По умолчанию - Нет.

Есть свойство length, которое обычно используется для того же результата следующим образом:

if ($(selector).length)

Здесь «селектор» должен быть заменен фактическим селектором, который вас интересует, существует он или нет. Если он существует, свойство length выведет целое число больше 0, и, следовательно, оператор if станет истинным и, следовательно, выполнит блок if. Если этого не произойдет, будет выведено целое число «0», и, следовательно, блок if не будет выполнен.

Выяснил, что это самый способ jQuery, ИМХО. Расширение функции по умолчанию легко и может быть выполнено в глобальном файле расширения.

$.fn.exist = function(){
  return !!this.length;
};

console.info($("#yes").exist())

console.info($("#no").exist())

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "yes">id = yes</div>

Есть странность, известная как кондиционирование при коротком замыкании. Не многие заявляют об этой функции, поэтому позвольте мне объяснить!

//you can check if it isnt defined or if its falsy by using OR
console.info( $(selector) || 'this value doesnt exist' )

//or run the selector if its true, and ONLY true
console.info( $(selector) && 'this selector is defined, now lemme do somethin!' )

//sometimes I do the following, and see how similar it is to SWITCH
console.info(
({  //return something only if its in the method name
    'string':'THIS is a string',
    'function':'THIS is a function',
    'number':'THIS is a number',
    'boolean':'THIS is a boolean'
})[typeof $(selector)]||
//skips to this value if object above is undefined
'typeof THIS is not defined in your search')

Последний бит позволяет мне видеть, какой тип ввода имеет мой typeof и работает в этом списке. Если есть значение вне моего списка, я использую оператор OR (||) для пропуска и обнуления. Он имеет ту же производительность, что и Switch Case, и считается несколько лаконичным. Тестирование выполнения условных выражений и использования логических операторов.

Боковое примечание: объект-функция вроде как должна быть переписана>.

Ресурсы: Логическое И (с оценкой короткого замыкания)