javascript - элемента - Есть ли функция «существует» для jQuery?




проверка на существование переменной js (20)

В JavaScript все «правдивое» или «ложное», а для чисел 0 (и NaN) означает « false , все остальное true . Поэтому вы можете написать:

if ($(selector).length)

Вам не нужна эта часть >0 .

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

Как насчет:

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

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

Это очень минимально и экономит ваше время, когда вы включаете селектор с помощью $() .


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

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

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

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


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

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

Причина, по которой все предыдущие ответы требуют параметра .length заключается в том, что они в основном используют селектор $() jquery, у которого есть запросSelectorAll за шторами (или они используют его напрямую). Этот метод довольно медленный, потому что ему необходимо проанализировать все дерево 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);

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

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

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

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

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


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

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

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

Plugin

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

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

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


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

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

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

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

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

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

jQuery.contains( container, contained )

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

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


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

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

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




jquery