Я должен действительно проверить, существует ли элемент с jQuery?

У меня недавно был вопрос о том, как правильно проверить, существует ли элемент с jQuery. Я нашел ответ отсюда:

https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

Таким образом:

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

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

if ($( "#myDiv" ) && $( "#myDiv" ).length ) {
    // Do something
}

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

Также:

$( "#myDiv" ).show();
$( "#myDiv" ).hide();
$( "#myDiv" ).val('');

В подобных функциях jQuery это кажется нет if проверка необходима, потому что они не повысят ошибку если #myDiv не существует, корректный?

Если это имеет значение я использую jQuery 1.6.4.

62
задан 9 August 2016 в 18:12

5 ответов

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

if ($( "#myDiv" ) && $( "#myDiv" ).length ) {
    //do something
}

Он неправ, по крайней мере, с точки зрения $( "#myDiv" ) && часть. jQuery $(selector) всегда возвраты объект, который по определению является truthy. Так, чтобы часть была бессмысленна, и перезапросы DOM ни по какой причине.

я имею в виду от производительности или мудрой задержки, они выполняют то же?

Перезапросы DOM ни по какой причине являются отходами, но большую часть времени это не имеет значения никаким заметным способом, и особенно не для идентификационных селекторов как $("#myDiv"), которые оптимизированы jQuery в вызовы к getElementById (который ослепительно быстр). Так, с одной стороны, да, это - расточительная дополнительная работа. С другой стороны, браузеры так быстры в эти дни, что у Вас, вероятно, есть важная персона для жарки. Но это - вероятно, дополнительный бессмысленный код, который является большей проблемой.

К общей точке: jQuery основан на наборе . Это означает, что операции на наборах без элементов в них без операций в секунду. Например:

$(".foo").addClass("bar");

... не (не ошибка), если никакой .foo элементы находятся в DOM.

Так проверяют на [1 110], если и когда Вы заботитесь, соответствовали ли Вы элементам. Если Вы не заботитесь и просто хотите выполнить операции на них , если они там , просто идут вперед и делают операцию (с одним важным протестом <глоток> 1 ).

Так в основном, существует три сценария:

  1. Вы знаете, что элементы будут там, таким образом, проверка будет бессмысленна
    => никакая проверка

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

  3. , Вы заботитесь, являются ли элементы там по некоторой другой причине
    =>, делают проверка

<час>

<глоток> 1 Вот является важным протестом: Если Вы вызовете функцию jQuery, которая возвращает что-то другое, чем объект jQuery (например, val() или offset() или position(), и т.д.), когда Вы назовете его на пустом множестве, то это будет обычно возвращаться undefined (исключение text(), который возвратится "" [text(), не похож на другие несколькими способами; это - один из них]). Таким образом, написание кода, которое наивно принимает те вещи, возвратит то, что Вы ожидаете, даже когда множество пусто, укусит Вас.

Так, например:

if ($(".foo").offset().top > 20)

... бросит ошибку, если не будет никаких .foo элементы, потому что offset() возвратится undefined, не объект.

, Но это прекрасно:

$(".foo").closest(".bar").toggleClass("baz"):

..., потому что, даже при отсутствии .foo, closest(), возвратит другой пустой набор jQuery, и вызов toggleClass() на нем нет.

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

var offset = $(".foo").offset();
if (offset && offset.top > 20)

Снова, большинство средств доступа (которые не возвращают объекты jQuery) делает это, включая [1 124], offset(), position(), css()...

101
ответ дан 31 October 2019 в 13:41

Это имеет значение, и $( "#myDiv" ).length лучше, потому что это не работает document.getElementById('myDiv') дважды. При кэшировании селектора он имел бы значение намного меньше:

var $myDiv = $( "#myDiv" );

if ($myDiv && $myDiv.length) { ... }

Однако селекторы jQuery всегда возвращаются что-то , который будет интерпретироваться как "truthy", таким образом

if ($('#myDiv')) { 

будет бессмысленная проверка.

28
ответ дан 31 October 2019 в 13:41

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

if ($( "#myDiv" ) && $( "#myDiv" ).length ) {
    //do something 
}

Этот оператор является ложью. Проверка $( "#myDiv" ).length просто возвратилась бы 0, если это не найдено. Безусловно, вот пример кода и с id найден, и с секунда id, это не присутствует:

console.log("Count of #myDiv's found: " + $("#myDiv").length);
console.log("Count of #AnotherMyDiv's found: " + $("#AnotherMyDiv").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="myDiv"></div>
5
ответ дан 31 October 2019 в 13:41

Зависит от того, что Вы делаете после если оператор.

Думают о нем как это. Любой вызов селектора jQuery возвращается, jQuery возражают, что это - в основном массив, расширенный с помощью набора различных методов. То, когда Вы назовете что-то как $(".my-elements").show(), это циклично выполнится по любым элементам $(".my-elements"), возвратилось, и подайте заявку .show() к ним, затем возвращают тот же самый объект jQuery, который является как цепочки jQuery.

, Если Вы просто делаете chainable вещи затем не, Вы не должны делать если проверка. Поскольку все последующие методы просто сделают цикл, эквивалентный for (var i=0; i<0; i++){ }, что означает, что ничего не произойдет. Если у Вас есть большая цепочка, и Вы выполняете ее в большом цикле, который должен быть очень производительным, Вы могли бы хотеть сделать, если проверка, но обычно она не будет действительно иметь значения с точки зрения производительности.

однако, при выполнении чего-то, что бросит ошибку или даст Вам плохой результат, если элемент не будет существовать затем да, используйте если проверка. Например

function addHeight() {
  var height1 = $("#div1").height(),
      height2 = $("#div2").height();

  $("#otherDiv").css({ top: height1 + height2 });
}

, Если div1 или div2 не существуют otherDiv, доберется, это - главный набор к NaN, который является, вероятно, не, для чего Вы идете. В этом случае Вы хотели бы проверить, что и div1 и div2 на самом деле существуют, но Вы все еще не должны действительно проверять на [1 111], потому что, если это не существует, ничего не произойдет так или иначе.

3
ответ дан 31 October 2019 в 13:41

Более просто проверить, существует ли и, если мы хотим больше информации от объекта, мы не получим ошибку несуществующего объекта.

if (!!$( "#myDiv" )) {
    //do something
}
-1
ответ дан 31 October 2019 в 13:41

Другие вопросы по тегам:

Похожие вопросы: