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

Question

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

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

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

if ($(selector).length > 0) {

    // Do something

}

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

596 30

jQuery javascript

30 ответов:

Comments

Ничего не найдено.

Tim Büthe · Accepted Answer · 2016-10-17 17:52:46

в JavaScript все "правдиво" или "ложно", а для чисел 0 (и NaN) означает false все остальное true. Так что вы могли бы написать:
if ($(selector).length)
не нужно >0 часть.

Jake McGraw · Accepted Answer · 2017-02-14 00:37:16

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

if ($(selector).exists()) {
    // Do something
}
это в ответ на: подкаст пастушьего кода с Джеффом Этвудом

Jon Erickson · Accepted Answer · 2015-06-30 11:09:35

если вы используете
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 */ }

Yanni · Accepted Answer · 2016-06-29 07:43:15

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

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

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

Magne · Accepted Answer · 2012-01-11 14:37:09

самый быстрый и наиболее семантически лаконичный способ, чтобы проверить наличие на самом деле, используя простой JavaScript:
if (document.getElementById('element_id')) {
    // Do something
}
это немного больше времени для записи, чем альтернатива длины jQuery, но выполняется быстрее, так как это собственный метод JS.

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

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

Salman A · Accepted Answer · 2014-01-18 11:04:47

вы можете сохранить несколько байт, написав:
if ($(selector)[0]) { ... }
это работает, потому что каждый объект jQuery также маскируется как массив, поэтому мы можем использовать оператор разыменования массива, чтобы получить первый элемент из массив. Он возвращает undefined если нет элемента с указанным индексом.

Devon · Accepted Answer · 2008-09-17 20:53:34

вы можете использовать:
if ($(selector).is('*')) {
  // Do something
}
A мало более элегантное, возможно.

SpYk3HH · Accepted Answer · 2016-06-12 12:10:58

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

amypellegrini · Accepted Answer · 2013-05-10 10:48:47

на самом деле нет необходимости в jQuery. С помощью простого JavaScript проще и семантически правильно проверить:
if(document.getElementById("myElement")) {
    //Do something...
}
Если по какой-либо причине вы не хотите помещать идентификатор в элемент, вы все равно можете использовать любой другой метод JavaScript, предназначенный для доступа к DOM.

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

Alireza · Accepted Answer · 2018-09-28 18:02:55

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

Amitābha · Accepted Answer · 2016-03-15 09:46:58

вы могли бы использовать это:
jQuery.fn.extend({
    exists: function() { return this.length }
});

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

technosaurus · Accepted Answer · 2014-08-13 08:24:31

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

Oleg · Accepted Answer · 2012-02-07 19:43:29

я нашел 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

hiway · Accepted Answer · 2013-12-17 10:48:57

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

jQuery.содержит (container, contained )

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

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

Anurag Deokar · Accepted Answer · 2016-04-11 16:21:18

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

SJG · Accepted Answer · 2012-05-28 15:58:08

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

24

2012-05-28 15:58:08

Santiago Hernández · Accepted Answer · 2015-05-04 06:31:21

это очень похоже на все ответы, но почему бы не использовать ! оператор дважды, так что вы можете получить логическое значение:
jQuery.fn.exists = function(){return !!this.length};

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

Tilak Maddy · Accepted Answer · 2017-09-10 13:31:46

проверка на наличие элемента аккуратно документируется на официальном сайте jQuery!
использовать .длина свойство коллекции jQuery, возвращенное вашим селектор:
if ($("#myDiv").length) {
    $("#myDiv").show();
}
обратите внимание, что не всегда необходимо проверять, существует ли элемент. Следующий код покажет элемент, если он существует, и ничего не делать (без ошибок) если это не так:
$("#myDiv").show();

guest271314 · Accepted Answer · 2015-08-09 05:55:59

попробуйте проверить для DOM элемент
if (!!$(selector)[0]) // do stuff

Oliver · Accepted Answer · 2017-05-23 14:47:32

вдохновленный ответ hiway я придумал следующее:
$.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>

Sanu Uthaiah Bollera · Accepted Answer · 2016-06-19 01:37:03

Мне просто нравится использовать простой ванильный javascript для этого.
function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}

jcreamer898 · Accepted Answer · 2012-04-06 00:02:46

У меня был случай, когда я хотел увидеть, существует ли объект внутри другого, поэтому я добавил что-то в первый ответ, чтобы проверить селектор внутри селектора..
// 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;
};

Eternal1 · Accepted Answer · 2015-04-16 12:17:47

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

GSTAR · Accepted Answer · 2014-03-04 23:15:45

Как насчет:
function exists(selector) {
    return $(selector).length;
}

if (exists(selector)) {
    // do something
}
Это очень минимально и избавляет вас от необходимости заключать селектор с $() каждый раз.

Pawel · Accepted Answer · 2016-11-28 12:43:34

нет необходимости в jQuery
if(document.querySelector('.a-class')) {
  // do something
}

andy_314 · Accepted Answer · 2012-08-02 00:56:05

Я использую этот:
    $.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/

ducdhm · Accepted Answer · 2016-03-08 19:06:55

здесь 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
    }
);

Kamuran Sönecek · Accepted Answer · 2017-05-16 12:07:59

$("selector") дайте объект, который имеет length данные. Если есть элементы, как вы определяете в селекторе, вы получите их от объекта. Поэтому, если вы проверите его длину, которую вы уже можете найти, существует ли какой-либо элемент. В javascript 0 == false и null == false . Если вы не получите 0 ваши коды будут работать.
if($("selector").length){
   //code in the case
} 

sth · Accepted Answer · 2009-11-08 08:42:16

if ( $('#myDiv').size() > 0 ) { //do something }
size() подсчитывает количество элементов, возвращенных селектором

Andrei Todorut · Accepted Answer · 2017-06-20 12:43:38

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