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

Question

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

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

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

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

Answer 1

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

if ($(selector).length)

Тебе это не нужно >0 часть.

Answer 2

Да!

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

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

Это сделано в ответ на: Подкаст " Пастуший код" с Джеффом Этвудом

Answer 3

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

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

вы бы подразумевали, что цепочка была возможна, когда это не так.

Так было бы лучше:

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

В качестве альтернативы, из часто задаваемых вопросов:

if ( $('#myDiv').length ) { /* Do something */ }

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

if ( $('#myDiv')[0] ) { /* Do something */ }

Answer 4

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

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

---

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

Answer 5

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

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

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

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

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

Answer 6

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

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

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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

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

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

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

Answer 11

Вы могли бы использовать это:

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

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

Answer 12

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

Answer 13

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

Answer 14

Является $.contains() чего ты хочешь?

jQuery.contains( container, contained )

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

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

Answer 15

Вы можете проверить, присутствует элемент или нет, используя length в java script.Если длина больше нуля, то элемент присутствует, если длина равна нулю, то элемент отсутствует

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

Answer 16

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

Используйте .длина свойства коллекции jQuery и вернулся на свой селектор:

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

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

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

Answer 17

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

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

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

Answer 18

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

Answer 19

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

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

Answer 20

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

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

Answer 21

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

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

Answer 22

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

if(document.querySelector('.a-class')) {
  // do something
}

Answer 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

Answer 24

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

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

Answer 25

Как насчет:

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

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

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

Answer 26

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

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

Answer 27

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

Answer 28

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

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

Answer 29

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

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

Answer 30

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

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