Чи існує функція "існує" для jQuery?

Як я можу перевірити наявність елемента в jQuery?

Поточний код, який у мене є, такий:

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

Чи є більш елегантний спосіб підійти до цього? Можливо, плагін чи функція?

У JavaScript все "truthy" або "falesy", а для цифр 0(і NaN) означає falseвсе інше true. Отже, ви можете написати:

if ($(selector).length)

Вам не потрібна ця >0частина.

Так!

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

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

Це у відповідь на: Підкаст Herding Code з Джеффом Едвудом

Якщо ви використовували

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 немає значень, то отримання першого елемента в масиві повернеться невизначеним.

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. Але це також дало б уявлення іншим програмістам, що exists()функція - щось властиве jQuery. JavaScriptповинні / повинні розуміти інші, хто редагує ваш код, без збільшення боргу за знання.

Примітка: Помітьте відсутність "#" перед 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

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

Майте на увазі, що використання варіанту зворотного виклику допомагає підтримувати придатність - елемент повертається, і ви можете продовжувати ланцюжок команд, як і будь-який інший метод 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    */
    }
})

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

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

Якщо з якоїсь причини ви не хочете вводити ідентифікатор до елемента, ви все одно можете використовувати будь-який інший метод JavaScript, призначений для доступу до DOM.

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

Ви можете скористатися цим:

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;

Якщо вам насправді елемент не потрібен, а ви хочете отримати / зберігати лише справжнє / хибне, просто подвійно не це !! Це працює для взуття, яка розв’язана, так навіщо тут вузол?

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

Це $.contains()те, що ти хочеш?

jQuery.contains( container, contained )

$.contains()Метод повертає істину , якщо DOM елемент , передбачений другим аргументом є нащадком елемента DOM , наданого першим аргументом, чи є це прямим нащадком або більш глибоко вкладеним. В іншому випадку воно повертається хибним. Підтримуються лише вузли елементів; якщо другий аргумент - це текст або коментарний вузол, $.contains()поверне помилковим.

Примітка . Перший аргумент повинен бути елементом DOM, а не об'єктом jQuery або простим об’єктом JavaScript.

Я визнав 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

Ви можете перевірити наявність елемента або не використовувати довжину в сценарії 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
}

Перевірка наявності елемента зафіксована акуратно на офіційному веб-сайті jQuery!

Використовуйте властивість .length колекції jQuery, повернуту вашим селектором:

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

Зауважте, що не завжди потрібно перевіряти, чи існує елемент. Наступний код покаже елемент, якщо він існує, і нічого не робити (без помилок), якщо він не:

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

це дуже схоже на всі відповіді, але чому б не використати !оператора двічі, щоб ви могли отримати булевий:

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

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

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

Спробуйте перевірити DOMелемент

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

Надихнувшись відповіді hiway, я придумав таке:

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

Не потрібно 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

Мені просто подобається використовувати для цього звичайний JavaScript ванілі.

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

Я натрапив на це питання, і я хотів би поділитися фрагментом коду, яким я зараз користуюся:

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

У мене був випадок, коли я хотів побачити, чи існує об’єкт всередині іншого, тому я додав щось до першої відповіді, щоб перевірити наявність селектора всередині селектора.

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

Як щодо:

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

if (exists(selector)) {
    // 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, тому якщо ви не отримаєте, 0ваш код запуститься.

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

Ось повний приклад різних ситуацій та спосіб перевірити, чи існує елемент, використовуючи 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

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

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