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

avatar
Jake McGraw
27 августа 2008 в 19:49
807704
46
2939

Как проверить наличие элемента в jQuery?

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

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

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

Источник

Ответы (46)

avatar
Tim Büthe
25 февраля 2009 в 19:16
2617

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

if ($(selector).length)

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

Robert
29 июня 2017 в 20:35
59

@ abhirathore2006 Если вы используете селектор идентификатора, а элемент не существует, длина равна 0 и не вызывает исключений.

Robert
29 июня 2017 в 20:52
19

Что интересно, NaN != false.

Ismael Miguel
8 июля 2017 в 22:09
18

@James Это потому, что [].toString() === [].join(',') === "" и "" === "".

debute
9 августа 2017 в 13:54
1

[].toString() == "" верно, [].join(',') == "" также верно, [].toString() == [].join(',') снова верно, [].toString() == "" && [].join(',') == "" все еще верно, но [].toString() == [].join(',') == "" ложно ... Я не очень понимаю, почему последнее неверно, когда все предыдущие верны.

Sebastianb
25 августа 2017 в 14:46
3

@debute последний, вероятно, сравнивает true (логический результат первого ==) с "", который равен false. То есть: [].toString() == [].join(',') == "" -> true == "" -> false

oriadam
31 января 2018 в 11:06
11

@ Роберт и typeof NaN == 'number'

Sinjai
14 февраля 2018 в 05:09
7

Есть ли ощутимая польза от отказа от части > 0? Мне так кажется более ясным.

avatar
Vishwesh Chotaliya
6 декабря 2021 в 12:57
0

В JavaScript

if (typeof selector != "undefined") {
   console.log("selector exists");
} else {
   console.log("selector does not exists");
}

В jQuery

if($('selector').length){
    alert("selector exists");
} else{
    alert("selector does not exists");
}
avatar
Haroon Fayyaz
5 декабря 2021 в 13:47
1

Спасибо, что поделились этим вопросом. Во-первых, есть несколько способов проверить это. Если вы хотите проверить, существует ли элемент HTML в DOM. Для этого вы можете попробовать следующие способы.

  1. Использование селектора Id: в DOM для выбора элемента по id необходимо указать имя идентификатора, начинающееся с префикса (#). Вы должны убедиться, что каждый элемент HTML в DOM должен иметь уникальный id.
  2. Использование селектора class: Вы можете выбрать все элементы, принадлежащие к определенному классу, используя префикс (.).

Теперь, если вы хотите проверить, существует ли элемент в DOM или нет, вы можете проверить это, используя следующий код.

if($("#myId").length){
   //id selector
} 

if($(".myClass").length){
   //class selector
} 

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

let x
if(x)
  console.log("X");
else
  console.log("X is not defined");
avatar
Gareth Compton
3 февраля 2021 в 18:37
0

Есть странность, известная как формирование короткого замыкания. Не многие заявляют об этой функции, поэтому позвольте мне объяснить! <3

//you can check if it isnt defined or if its falsy by using OR
console.log( $(selector) || 'this value doesnt exist' )

//or run the selector if its true, and ONLY true
console.log( $(selector) && 'this selector is defined, now lemme do somethin!' )

//sometimes I do the following, and see how similar it is to SWITCH
console.log(
({  //return something only if its in the method name
    'string':'THIS is a string',
    'function':'THIS is a function',
    'number':'THIS is a number',
    'boolean':'THIS is a boolean'
})[typeof $(selector)]||
//skips to this value if object above is undefined
'typeof THIS is not defined in your search')

Последний бит позволяет мне видеть, какой тип ввода имеет мой typeof и работает в этом списке. Если есть значение вне моего списка, я использую оператор OR (||), чтобы пропустить и обнулить. Он имеет ту же производительность, что и Switch Case, и считается несколько кратким. Проверка производительности условных выражений и использования логических операторов.

Боковое примечание: объект-функция вроде как должна быть переписана>. <'Но этот тест, который я построил, был создан для того, чтобы проанализировать краткую и выразительную обусловленность.

Ресурсы: Логическое И (с оценкой короткого замыкания)

bfontaine
18 марта 2021 в 17:01
0

Не многие используют эту функцию, потому что она затрудняет чтение и сопровождение кода. Также будьте осторожны, последняя часть не похожа на переключатель, потому что выполняются все выражения , а не только то, которое вам нужно.

Geoff
29 июня 2021 в 06:12
0

Ваши примеры не будут работать для JQuery, поскольку даже если элемент, к которому применяется селектор, не существует, JQuery все равно создаст для него объект с пустой коллекцией, которая действительно существует. $ (selector) [0] будет работать.

Gareth Compton
20 июля 2021 в 15:36
0

Отметил, проверю работу вокруг

avatar
Greedo
23 сентября 2020 в 09:12
0

Я обнаружил, что это самый способ jQuery , ИМХО. Расширение функции по умолчанию легко и может быть выполнено в файле глобального расширения.

$.fn.exist = function(){
  return !!this.length;
};

console.log($("#yes").exist())

console.log($("#no").exist())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="yes">id = yes</div>
avatar
Amit Sharma
11 марта 2020 в 04:48
0

По умолчанию - №

Есть свойство length, которое обычно используется для того же результата следующим образом:

if ($(selector).length)

Здесь «селектор» должен быть заменен фактическим селектором, который вы хотите найти, существует он или нет. Если он существует, свойство length выведет целое число больше 0, и, следовательно, оператор if станет истинным и, следовательно, выполнит блок if. Если этого не произойдет, будет выведено целое число «0», и, следовательно, блок if не будет выполнен.

Amit Sharma
11 марта 2020 в 05:09
0

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

avatar
chickens
17 октября 2019 в 18:53
1

С jQuery вам не нужно >0, это все, что вам нужно:

if ($(selector).length)

С vanilla JS вы можете сделать то же самое с:

if(document.querySelector(selector))

Если вы хотите превратить его в функцию, возвращающую bool:

const exists = selector => !!document.querySelector(selector);

if(exists(selector)){
  // some code
}
avatar
Majedur
20 декабря 2018 в 08:38
5

Просто проверьте длину селектора, если она больше 0, то она вернет истину, в противном случае - ложь.

Для идентификатора:

 if( $('#selector').length )         // use this if you are using id to check
{
     // it exists
}

Для класса:

 if( $('.selector').length )         // use this if you are using class to check
{
     // it exists
}

Для раскрывающегося списка:

if( $('#selector option').size() ) {   // use this if you are using dropdown size to check

   // it exists
}
avatar
Abdul Rahman
19 декабря 2018 в 04:30
4

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

 if($("#element").length > 0){
   //the element exists in the page, you can do the rest....
 }

Найти элемент очень просто и легко.

faintsignal
11 января 2019 в 23:07
2

Ваш ответ не добавляет новой информации к тому, что уже было опубликовано. Это всего лишь часть информации в принятом ответе.

avatar
Rafal Enden
23 августа 2018 в 16:22
-3

Используйте querySelectorAll с forEach, нет необходимости в if и дополнительном назначении:

document.querySelectorAll('.my-element').forEach((element) => {
  element.classList.add('new-class');
});

как противоположность:

const myElement = document.querySelector('.my-element');
if (myElement) {
  element.classList.add('new-class');
}
avatar
Hassan Sadeghi
18 августа 2018 в 06:27
11

Попробуйте это.

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

jQuery.fn.exists=function(){return !!this[0];}; //jQuery Plugin

Использование:

console.log($("element-selector").exists());

_________________________________

ИЛИ ДАЖЕ КОРОЧЕ : ( для случаев, когда вы не хотите определять плагин jQuery):

if(!!$("elem-selector")[0]) ...;

или даже

if($("elem-selector")[0]) ...;
avatar
Manish Vadher
16 августа 2018 в 12:27
-1

Вход не будет иметь значения, если он не существует. Попробуйте это ...

if($(selector).val())
avatar
Jonas Lundman
17 марта 2018 в 02:54
4

Все ответы: не работает bullet proof для проверки наличия элемента в jQuery. После многих лет кодирования только это решение не выдает никаких предупреждений о существовании или отсутствии:

if($(selector).get(0)) { // Do stuff }

Или внести залог в начале вашей функции:

if(!$(selector).get(0)) return;

Разъяснение

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

avatar
sina_Islam
16 октября 2017 в 14:23
5

Простая служебная функция для селектора идентификатора и класса.

function exist(IdOrClassName, IsId) {
  var elementExit = false;
  if (IsId) {
    elementExit = $("#" + "" + IdOrClassName + "").length ? true : false;
  } else {
    elementExit = $("." + "" + IdOrClassName + "").length ? true : false;
  }
  return elementExit;
}

вызов этой функции, как показано ниже

$(document).ready(function() {
  $("#btnCheck").click(function() {
    //address is the id so IsId is true. if address is class then need to set IsId false
    if (exist("address", true)) {
      alert("exist");
    } else {
      alert("not exist");
    }
  });
});
Roland
14 ноября 2017 в 08:46
4

Таким образом вы поместите его в глобальное пространство имен. Что вы, возможно, захотите пересмотреть.

avatar
Andrei Todorut
20 июня 2017 в 09:43
15

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

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}
avatar
Alireza
20 мая 2017 в 09:21
68

Я вижу, что большинство ответов здесь неточно как должно быть, они проверяют длину элемента, это может быть ОК во многих случаях, но не 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: 'coderhelper', url: 'http://www.coderhelper.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
avatar
Tilak Maddy
22 марта 2017 в 14:32
37

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

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

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

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

$("#myDiv").show();
avatar
Pawel
28 ноября 2016 в 10:43
28

Нет необходимости в jQuery (базовое решение)

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

Гораздо более производительный вариант ниже (обратите внимание на отсутствие точки перед классом a).

if(document.getElementsByClassName('a-class')[0]) {
  // do something
}

querySelector использует надлежащий механизм сопоставления, например $ () (sizzle) в jQuery, и использует большую вычислительную мощность, но в 99% случаев подойдет. Второй вариант более явный и точно указывает коду, что делать. Это намного быстрее согласно jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25

avatar
Jonathan Cardoz
23 августа 2016 в 13:37
-1

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

let oElement = $(".myElementClass");
if(oElement[0]) {
    // Do some jQuery operation here using oElement
}
else {
    // Unable to fetch the object
}
avatar
abhirathore2006
31 июля 2016 в 06:42
13

Вот полный пример различных ситуаций и способ проверить, существует ли элемент с помощью прямого выбора if on 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

Демо

console.log("existing id", $('#id-1').length)
console.log("non existing id", $('#id-2').length)

console.log("existing class single instance", $('.cls-1').length)
console.log("existing class multiple instance", $('.cls-2').length)
console.log("non existing class", $('.cls-3').length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id-1">
  <div class="cls-1 cls-2"></div>
  <div class="cls-2"></div>
</div>
Béranger
9 сентября 2016 в 12:27
0

Вы можете попробовать $ ("# xysyxxs") в своем отладчике, и вы увидите, что jquery не возвращает null или undefined. Таким образом, окончательное решение не сработает

avatar
Sunil Kumar
26 июля 2016 в 05:32
11

Да. Лучший способ сделать это:

От JQuery:

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

selector может быть Element ID ИЛИ Element Class

ИЛИ

Если вы не хотите использовать библиотеку jQuery, вы можете добиться этого с помощью Core JavaScript:

От JavaScript:

if(document.getElementById("ElementID")) {
    //Do something...
}
Star
10 августа 2017 в 13:20
0

если «ElementID» не существует, тогда он не выдаст ошибку в условии if?

avatar
Sanu Uthaiah Bollera
18 июня 2016 в 22:37
26

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

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}
avatar
SpYk3HH
12 июня 2016 в 09:10
70

Этот плагин можно использовать в операторе 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    */
    }
})
Chris Marisic
16 июня 2016 в 17:46
1

В версии обратного вызова не должен ли обратный вызов Has Items действительно передавать объект в качестве аргумента?

avatar
Kamuran Sönecek
25 марта 2016 в 11:05
16

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

if($("selector").length){
   //code in the case
} 
Quentin
27 апреля 2016 в 12:33
5

«дать массив» - нет. Он дает вам объект jQuery (который разделяет некоторые свойства с массивом). Ваш ответ по сути такой же, как и у Тима Бете из 2009 года.

avatar
ducdhm
8 марта 2016 в 17:06
15

Вот мой любимый метод 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
    }
);
avatar
Oliver
13 октября 2015 в 20:01
28

Вдохновленный ответом 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()1857> возвращает <$(4).exists()185724990 В контексте проверки существования элемента в 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>
avatar
guest271314
9 августа 2015 в 02:55
28

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

if (!!$(selector)[0]) // do stuff
avatar
Anurag Deokar
9 июля 2015 в 12:39
44

Вы можете проверить наличие элемента или его отсутствие, используя длину в 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
}
Pranav Labhe
22 августа 2015 в 11:22
4

Вам не нужно проверять, что длина погоды больше 0, если ($ ('# elementid'). Length) {} будет достаточно.

A1rPun
16 марта 2016 в 16:01
13

Вы действительно прочитали вопрос? Это точно такой же метод, который использует OP.

avatar
Santiago Hernández
4 мая 2015 в 03:31
33

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

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

if ($(selector).exists()) {
    // the element exists, now what?...
}
user7892745
22 мая 2017 в 21:47
2

Потому что Boolean(x) может иногда быть более эффективным.

avatar
technosaurus
11 августа 2014 в 23:42
46

Причина, по которой для всех предыдущих ответов требуется параметр .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);
avatar
Eternal1
28 июля 2014 в 10:50
24

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

$.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
Lev
5 августа 2014 в 07:31
9

Я считаю, что оригинальный подход OP не только гораздо более минималистичен, но и более элегантен, чем этот. Кажется излишним писать столько кода, когда метод OP короче и не включает обратные вызовы.

Eternal1
5 августа 2014 в 07:38
0

Для простых случаев - ты прав. Но для более сложных ситуаций, требующих большого количества кода в обоих случаях, я думаю, что мой подход лучше.

Jarvl
24 июня 2016 в 18:55
4

В какой сложной ситуации этот подход был бы лучше простого оператора if / else?

avatar
MAX POWER
4 марта 2014 в 21:15
19

Как насчет:

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

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

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

1j01
21 июня 2015 в 21:48
3

Это читается как «если существует вещь» вместо «если вещь существует», что if($("#thing").exists(){} читается как. Кроме того, это не способ jQuery.

avatar
Salman A
18 января 2014 в 09:04
79

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

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

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

JasonWilczak
25 марта 2015 в 15:08
1

Я пришел сюда, чтобы опубликовать этот точный ответ ... обязательная скрипка: jsfiddle.net/jasonwilczak/ekjj80gy/2

Jean Paul -JP A.K.A el_vete
21 июля 2015 в 13:51
3

@JasonWilczak Не забудьте прокомментировать, почему бы вместо этого: .eq [0] или .first () для ссылки на первый найденный элемент, а не на приведение типов?

Salman A
21 июля 2015 в 15:16
7

Нет, jQuery.first() или jQuery.eq(0) оба возвращают объекты, объекты являются правдивыми, даже если они пустые. Этот пример должен проиллюстрировать, почему эти функции нельзя использовать как есть: if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists")

Robert
29 июня 2017 в 20:20
1

Верный. .eq(0) возвращает просто еще один объект jQuery, усеченный до длины 1 или 0. .first() - это просто удобный метод для .eq(0). Но .get(0) возвращает первый элемент DOM или undefined и совпадает с [0]. Первый элемент DOM в объекте jQuery хранится в свойстве обычного объекта с именем '0'. Это простой доступ к собственности. Единственное приведение типа происходит из неявного преобразования числа 0 в строку '0'. Поэтому, если приведение типа является проблемой, вы можете вместо этого использовать $.find(selector)['0'].

avatar
hiway
23 октября 2013 в 05:46
44

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

jQuery.contains( container, contained )

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

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

user1106925
4 июня 2016 в 13:28
3

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

avatar
Amitābha
1 июня 2013 в 07:20
58

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

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

if($(selector).exists()){/*do something*/}
avatar
andy_314
1 августа 2012 в 21:56
16

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

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

avatar
SJG
28 мая 2012 в 12:58
29
$(selector).length && //Do something
Emile Bergeron
8 октября 2016 в 00:35
19

Я ненавижу эти умные способы избежать использования if, где if улучшит читаемость за счет 2 байтов.

user7892745
22 мая 2017 в 21:46
0

Кроме того, все эти && минификаторы сделают за вас.

Tilak Maddy
12 июля 2020 в 12:53
0

Ха-ха, 8 лет спустя, это так часто встречается в React JS 😄

avatar
jcreamer898
5 апреля 2012 в 21:02
20

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

// 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;
};
avatar
Oleg
6 февраля 2012 в 20:37
42

Я обнаружил, что 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
nnnnnn
22 декабря 2014 в 11:24
12

Как часто вы вызываете $() с пустым объектом в качестве аргумента?

Oleg
22 декабря 2014 в 15:03
0

@nnnnnn На самом деле никогда (я больше не использую jQuery). Но я думаю, 3 года назад у меня был случай, когда я раскрыл API, который брал бы селектор и возвращал количество элементов для этого селектора. Если другой разработчик передаст пустой объект, он неправильно ответит 1.

All Workers Are Essential
26 марта 2015 в 15:46
3

Зачем вам передавать пустой объект {} в $()?

Oleg
26 марта 2015 в 15:48
8

@cpburnz, почему ты меня спрашиваешь? Я был просто поставщиком API ... Люди передают API всякие глупости.

Joseph Gabriel
18 апреля 2016 в 21:09
4

Только что заметил, ветка проблемы jquery, на которую ссылается @FagnerBrack, была обновлена ​​вскоре после его комментария; похоже, что он все-таки никуда не денется.

avatar
Magne
11 января 2012 в 12:27
111

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

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

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

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

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

kikito
7 марта 2012 в 16:30
61

Совершенно не одно и то же. Селекторы JQuery можно использовать для любого правила CSS - например, $('#foo a.special'). И он может возвращать более одного элемента. getElementById не могу приблизиться к этому.

Magne
10 мая 2012 в 08:55
7

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

PerryCS
10 февраля 2013 в 03:04
1

Хотя я предпочитаю метод JQuery, мне всегда нравится видеть исходный необработанный метод работы! Дает больше понимания, когда вы видите, что JQuery что-то делает.

Noz
27 мая 2013 в 20:21
1

Может быть, что-то вроде if('#foo a.special')[0]), если вы все еще хотите использовать селекторы jQuery? Хотя, я полагаю, такое поражение цели.

SpYk3HH
2 октября 2013 в 17:26
0

Даже когда вы написали это в 2012 году, аргументы скорости не действовали из-за изменений в стандартах технологии . Аргумент скорости в движках JavaScript мертв уже много лет.

Blue Skies
8 декабря 2013 в 00:43
32

@Noz if(document.querySelector("#foo a.special")) подойдет. Не требуется jQuery.

Blue Skies
8 декабря 2013 в 00:45
37

Аргумент скорости в движках JS мертв только в сознании людей, которые не могут работать без jQuery, поскольку это аргумент, который они не могут выиграть.

JustJohn
18 ноября 2014 в 21:05
26

Помните старые добрые времена, когда у нас было все, что у нас было document.getElementById? И я всегда забывал документ. и не мог понять, почему это не сработало. И я всегда писал неправильно и неправильно использовал регистр символов.

AGamePlayer
5 марта 2016 в 03:33
3

Я бы бросил писать JavaScript, если бы мне пришлось: 1) работать без консоли отладки или 2) работать с getElementById

nnnnnn
8 июля 2016 в 03:31
2

Очевидно, что ванильные методы JS быстрее, но обратите внимание, что в вопросе не указан выбор по идентификатору элемента, поэтому на самом деле вам нужен document.querySelector(), и даже он не может обрабатывать все селекторы, которые может jQuery. Поэтому при вызове единственной собственной JS-функции для этой цели хорошо , в некоторых случаях вам придется писать дополнительный код. (Кроме того, if ($(selector).length) довольно очевиден - я действительно не думаю, что это могло бы сбить с толку кого-либо, имеющего опыт работы с JS.)

eithed
23 августа 2016 в 15:59
3

Удачного тестирования :visible или любого другого пользовательского селектора jquery

avatar
amypellegrini
14 ноября 2011 в 14:20
58

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

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

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

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

amypellegrini
14 ноября 2011 в 14:24
5

Я знаю: он не отвечает напрямую на исходный вопрос (который запрашивает функцию jquery), но в этом случае ответ будет «Нет» или «семантически неправильное решение».

avatar
Yanni
3 апреля 2011 в 12:17
142

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

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

// if element does not exist
if(!$('selector').length){ /* do something */ }
Th4t Guy
31 июля 2014 в 17:28
138

Разве вы не видели, что Тим Бют уже дал этот ответ за 2 года до вас?

Jeremy W
5 августа 2015 в 15:03
110

Пффф, Тим никогда не показывал, как проверить, не существует ли элемента.

avatar
Mad_Hat
25 февраля 2009 в 02:44
11
if ( $('#myDiv').size() > 0 ) { //do something }

size() подсчитывает количество элементов, возвращаемых селектором

Ian
3 июня 2013 в 21:41
11

@Furbeenator Я не знаю, откуда вы берете информацию, но .size() не делает ничего, кроме возврата .length. Есть причина, по которой он устарел

Furbeenator
5 июня 2013 в 18:30
0

Вы правы, но вызов .length как свойства требует немного меньше накладных расходов, чем вызов функции для .size(). Виноват.

avatar
Jon Erickson
14 января 2009 в 19:46
386

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

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 */ }
strager
14 января 2009 в 20:00
13

Первый метод лучше читается. $ ("a"). exists () читается как "если существует <a> элементов". $ .exists ("a") читается как "если существует <a> элементов".

Jon Erickson
15 января 2009 в 00:31
18

правда, но опять же, вы подразумеваете, что цепочка возможна, и если бы я попытался сделать что-то вроде $ (selector) .exists (). css ("color", "red"), это не сработало бы, и тогда я был бы = * (

Matthew Crumley
16 января 2009 в 05:42
22

Уже есть методы, которые нельзя объединять в цепочку, например функции attr и data. Я все же понимаю вашу точку зрения и, чего бы это ни стоило, я в любом случае просто проверяю длину> 0.

Ben Blank
8 сентября 2010 в 06:43
42

Зачем вам это нужно связывать? $(".missing").css("color", "red") уже поступает правильно… (т.е. ничего)

nickb
14 сентября 2010 в 19:16
1

Первый пример ($ ('. MySelector'). Length) работает нормально, нет необходимости создавать для него оболочку exists ().

Christian
17 сентября 2010 в 07:18
0

2-е изменение .... if ($ ('# myDiv') [0]) {..... неопределенный индекс 0. Вы не должны сравнивать результат напрямую, так как результата НЕТ. Вместо этого вы должны .... if (typeof $ ('# myDiv') [0]! = 'Undefined') ...

Alnitak
18 июля 2014 в 08:12
20

Материал о цепочках - полная чушь - существует множество методов jQuery $.fn, которые возвращают что-то отличное от нового объекта jQuery и поэтому не связываются.

Emile Bergeron
8 октября 2016 в 00:48
0

$("<div></div>").length > 0 вернет true, создавая впечатление, что используемый селектор существует, но на самом деле это всего лишь допустимая строка HTML. Чтобы этого избежать, $.find(selector).length > 0 вызовет ошибку при недопустимом выражении селектора.

avatar
Devon
17 сентября 2008 в 17:53
71

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

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

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

vsync
24 ноября 2009 в 09:28
39

Это слишком много для такой простой вещи. см. ответ Тима Бюта

earnaz
16 сентября 2015 в 16:23
0

Это правильный ответ. Проблема метода length заключается в том, что он дает ложное срабатывание с любым числом, например: $ (666) .length // возвращает 1, но это недопустимый селектор

micropro.cz
22 февраля 2016 в 19:59
1

Это очень дорого для очень простой задачи. Просто посмотрите на реализацию jquery if .is (), и вы увидите, сколько кода нужно обработать, чтобы ответить вам на этот простой вопрос. Также не очевидно, что именно вы хотите сделать, поэтому оно такое же или, возможно, менее элегантное, чем рассматриваемое решение.

Todd
8 марта 2016 в 12:55
1

@earnaz отличный момент, хороший улов. Однако я не понимаю, где это действительно стоящее беспокойство. Разработчики, идентифицирующие элементы с помощью 666, вероятно, имеют множество других причин, по которым их код не работает. Хотя это недопустимый селектор, $ (666) .length является допустимым javascript : он оценивается как истинный, и поэтому должен удовлетворять условию.

Emile Bergeron
8 октября 2016 в 00:41
0

@earnaz, чтобы избежать этого конкретного случая, $.find(666).length работает.

avatar
Jake McGraw
27 августа 2008 в 19:50
1393

Да!

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

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

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

vsync
24 ноября 2009 в 09:22
257

Я просто пишу: if ($ (selector) .length) {...} без '> 0'

C Snover
30 мая 2010 в 04:14
372

Ваш пример $.fn.exists заменяет поиск свойств (дешево!) Двумя вызовами функций, которые намного дороже, и один из этих вызовов функций воссоздает объект jQuery, который у вас уже есть, что просто глупо.

Ben Zotto
2 августа 2010 в 20:52
215

@redsquare: Удобочитаемость кода - лучшее объяснение для добавления такой функции в jQuery. Если что-то под названием .exists читается чисто, тогда как .length читается как нечто семантически другое, даже если семантика совпадает с идентичным результатом.

redsquare
3 августа 2010 в 00:13
51

@quixoto, извините, но .length - это стандарт для многих языков, который не требует упаковки. Как еще вы интерпретируете .length?

Ben Zotto
3 августа 2010 в 00:29
147

На мой взгляд, это по крайней мере одно логическое косвенное указание от концепции «длина списка больше нуля» к концепции «элемента (ов), для которого я написал селектор». Да, технически это одно и то же, но концептуальная абстракция находится на другом уровне. Это заставляет некоторых людей предпочесть более явный индикатор, даже за счет некоторой потери производительности.

KitsuneYMG
5 марта 2014 в 19:27
3

Какой ужасный ответ. Что, если селектор соответствует сотням узлов и первому exists? Он должен немедленно выйти из-под залога и вернуть истину. Нет смысла возиться с остальным. пример: if( $('div.tag:contains("nsfw")').exist() ) agecheck(); на доске изображений или что-то в этом роде

cowbert
1 июня 2015 в 09:06
12

«Некоторые люди, столкнувшись с проблемой, думают:« Я знаю, я расширю базовую библиотеку ». Теперь у них две проблемы ». После того, как вы определили эту функцию и начнете использовать везде .exists(), весь этот код станет непереносимым в отсутствие такого определения функции. Похоже, это снизит ремонтопригодность.

earnaz
16 сентября 2015 в 16:19
5

Отличный ответ ... но попробуйте любое число, например: $ (666) .exists () // результат верный (неверный)

AndFisher
24 августа 2017 в 11:39
2

Коллекция jQuery будет «существовать» независимо от того, пуста она или нет. Вы не почувствуете необходимости в Array.prototype.exists = function() {return this.length;} для удобочитаемости кода.