Вопрос:

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

javascript jquery

696741 просмотра

30 ответа

33102 Репутация автора

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

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

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

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

Автор: Jake McGraw Источник Размещён: 27.08.2008 07:49

Ответы (30)


1298 плюса

33102 Репутация автора

Да!

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

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

Это в ответ на: подкаст Herding Code с Джеффом Этвудом

Автор: Jake McGraw Размещён: 27.08.2008 07:50

56 плюса

4444 Репутация автора

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

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

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

Автор: Devon Размещён: 17.09.2008 05:53

349 плюса

76561 Репутация автора

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

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 */ }
Автор: Jon Erickson Размещён: 14.01.2009 07:46

2240 плюса

48051 Репутация автора

Решение

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

if ($(selector).length)

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

Автор: Tim Büthe Размещён: 25.02.2009 07:16

121 плюса

2167 Репутация автора

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

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

// if element does not exist
if(!$('selector').length){ /* do something */ }
Автор: Yanni Размещён: 03.04.2011 12:17

50 плюса

919 Репутация автора

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

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

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

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

Автор: amypellegrini Размещён: 14.11.2011 02:20

86 плюса

10848 Репутация автора

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

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

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

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

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

Автор: Magne Размещён: 11.01.2012 12:27

34 плюса

7524 Репутация автора

Я обнаружил, 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
Автор: Oleg Размещён: 06.02.2012 08:37

18 плюса

6458 Репутация автора

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

// 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;
};
Автор: jcreamer898 Размещён: 05.04.2012 09:02

26 плюса

1623 Репутация автора

$(selector).length && //Do something
Автор: SJG Размещён: 28.05.2012 12:58

14 плюса

329 Репутация автора

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

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

Автор: andy_314 Размещён: 01.08.2012 09:56

56 плюса

19276 Репутация автора

Этот плагин можно использовать в 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    */
    }
})
Автор: SpYk3HH Размещён: 09.11.2012 05:47

46 плюса

1690 Репутация автора

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

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

if($(selector).exists()){/*do something*/}
Автор: Amitābha Размещён: 01.06.2013 07:20

33 плюса

2022 Репутация автора

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

jQuery.contains( container, contained )

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

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

Автор: hiway Размещён: 23.10.2013 05:46

62 плюса

182534 Репутация автора

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

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

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

Автор: Salman A Размещён: 18.01.2014 09:04

17 плюса

1623 Репутация автора

Как насчет:

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

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

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

Автор: GSTAR Размещён: 04.03.2014 09:15

19 плюса

4006 Репутация автора

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

$.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
Автор: Eternal1 Размещён: 28.07.2014 10:50

40 плюса

6030 Репутация автора

Причина, по которой все предыдущие ответы требуют этот .lengthпараметр, заключается в том, что они в основном используют $()селектор jquery, у которого querySelectorAll находится за занавесом (или они используют его напрямую). Этот метод довольно медленный, потому что ему нужно проанализировать все дерево DOM, найти все совпадения с этим селектором и заполнить ими массив.

Параметр ['length'] не нужен или не полезен, и код будет намного быстрее, если document.querySelector(selector)вместо этого использовать его напрямую , поскольку он возвращает первый соответствующий элемент или ноль, если не найден.

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);
Автор: technosaurus Размещён: 11.08.2014 11:42

26 плюса

3086 Репутация автора

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

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

if ($(selector).exists()) {
    // the element exists, now what?...
}
Автор: Santiago Hernández Размещён: 04.05.2015 03:31

32 плюса

676 Репутация автора

Вы можете проверить наличие или отсутствие элемента в 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
}
Автор: Anurag Deokar Размещён: 09.07.2015 12:39

24 плюса

1 Репутация автора

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

if (!!$(selector)[0]) // do stuff
Автор: guest271314 Размещён: 09.08.2015 02:55

23 плюса

6738 Репутация автора

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

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

Автор: Oliver Размещён: 13.10.2015 08:01

12 плюса

1686 Репутация автора

Вот мой любимый 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
    }
);
Автор: ducdhm Размещён: 08.03.2016 05:06

13 плюса

1895 Репутация автора

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

if($("selector").length){
   //code in the case
} 
Автор: Kamuran Sönecek Размещён: 25.03.2016 11:05

22 плюса

676 Репутация автора

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

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}
Автор: Sanu Uthaiah Bollera Размещён: 18.06.2016 10:37

9 плюса

2222 Репутация автора

Вот полный пример различных ситуаций и способа проверить, существует ли элемент, используя 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
Автор: abhirathore2006 Размещён: 31.07.2016 06:42

21 плюса

5864 Репутация автора

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

if(document.querySelector('.a-class')) {
  // do something
}
Автор: Pawel Размещён: 28.11.2016 10:43

29 плюса

1503 Репутация автора

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

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

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

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

$("#myDiv").show();
Автор: Tilak Maddy Размещён: 22.03.2017 02:32

52 плюса

49996 Репутация автора

Я вижу, что большинство ответов здесь не точны, как должно быть, они проверяют длину элемента, во многих случаях это может быть нормально , но не на 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
Автор: Alireza Размещён: 20.05.2017 09:21

10 плюса

2149 Репутация автора

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

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}
Автор: Andrei Todorut Размещён: 20.06.2017 09:43
Вопросы из категории :
32x32