我真的需要使用 jQuery 检查元素是否存在吗？

Question

我最近有一个关于如何使用 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。

原文由 OPK 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

与我一起工作的一个人说正确的检查方法应该是：

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

他错了，至少就 `$( "#myDiv" ) &&` 部分而言。 jQuery 的 `$(selector)` **总是** 返回一个对象，根据定义它是真实的。所以那部分是没有意义的，并且无缘无故地重新查询 DOM。

> 我的意思是从性能或延迟方面来看，它们的性能相同吗？

无缘无故地重新查询 DOM 是一种浪费，但大多数时候它在任何可观察的方式上都无关紧要，尤其是对于像 `$("#myDiv")` 这样的 ID 选择器来说更是如此，它被 jQuery 优化为调用 `getElementById` （非常快）。所以一方面，是的，这是浪费额外的工作。另一方面，如今的浏览器速度如此之快，以至于您可能有更大的鱼要炸。但这可能是额外的无意义代码，这是更大的问题。

总的来说：jQuery is _set-based_ 。这意味着对其中没有元素的集合的操作是空操作。例如：

$(“.foo”).addClass(“bar”);

...如果 DOM 中没有 `.foo` 元素，则为无操作（不是错误）。

因此，检查 `length` 是否以及何时关心是否匹配元素。如果您不关心并且只想在它们 _存在_ 时对其执行操作，请继续执行操作（有一个重要的警告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()` 是一个 no-op。

所以当处理一个不返回 jQuery 对象的访问器时，如果你不确定你正在处理一个包含至少一个元素的集合，你需要更多的防御，例如：

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

”`

Again, most accessors (that don’t return jQuery objects) do this, including val() , offset() , position() , css() , . ..

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

它很重要，而且 $( "#myDiv" ).length 更好，因为它没有运行 document.getElementById('myDiv') 两次。如果您正在缓存选择器，那就没那么重要了：

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

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

然而，jQuery 选择器总是返回 一些 会被解释为“真实”的东西，所以

if ($('#myDiv')) {

是毫无意义的支票。

原文由 Rob M. 发布，翻译遵循 CC BY-SA 3.0 许可协议