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

да!

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

if ($(selector).exists()) {
    // 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 element exists
if($('selector').length){ /* do something */ }

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

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

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

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

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

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

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

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

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

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

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

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

этот плагин может быть использован в качестве 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

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

имейте в виду, что с помощью вариант обратного вызова, помогает поддерживать сохранить chainability - элемент возвращается, и вы можете продолжить цепочку команд, как и с любым другим методом 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. С помощью простого JavaScript проще и семантически корректно проверить:

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

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

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

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

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

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

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

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

я нашел 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.');
}

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

Edit:внимание! это не работает в IE, когда selector - это строка.

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE

Is $.содержит() чего вы хотите?

с помощью jQuery.содержит( контейнер, содержали )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

вдохновленный hiway это!--15--> я придумал следующее:

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

С помощью jQuery.содержит принимает два элемента 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>

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

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

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

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

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

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

Как насчет:

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

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

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

нет необходимости в jQuery

if(document.querySelector('.a-class')) {
  // 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/

здесь 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 и null == false . Если вы не получите 0 ваши коды будут работать.

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

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

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

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

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