.length和[0]的区别是什么来检查一个有ID的元素是否存在

What is the difference between .length and [0] to check if an element with an ID exists

本文关键字：一个 ID 存在 是否 元素 检查 区别 length 是什么      更新时间：2023-09-26

我已经看到了两种方法来检查具有特定ID的元素是否存在于页面上，我想知道为什么第二种方法有效。

我所看到的一种方式如下，我认为我理解它:

if ( $('#elementID').length > 0 ) {
  //Do something
}
else {
  //Do something else
}

另一种我不太理解的方法是:

if ( $('#elementID')[0] ) {
  //Do something
}
else {
  //Do something else
}

[0]是什么意思?我通常看到[…]用于数组的，所以这是返回一个数组吗?

谢谢。

jQuery选择器返回与选择器匹配的值数组。

第一个例子检查数组的长度。第二个例子试图检查第一个元素是否存在。

if ( $('elementID').length > 0 ) {
  //checks the length of the array.  If the selector hit at least 1 element it does something
if ( $('elementID')[0] ) {
  //Tries to check if the first element exists.  
  //This really should work in this case, because jQuery will return jquery objects 
  //but in the general case for checking arrays is dangerous because will be incorrect for falsy values

所以最后，两者都是"If there are elements selected"的简写

我一开始说第二个是危险的。这在jQuery的情况下实际上不是真的，因为jQuery/DOM对象总是真实的。一般来说，使用if(element)来检查一个元素是否存在是很危险的，因为它会对0或"这样的值返回false。因此，如果您不确定，我将推荐第一种惯例，因为它在更广泛的情况下更安全。但是对于这个特殊的例子，两个选项都可以。

一个jQuery包装对象有它的所有元素/等存储在一个类似数组的方式，这就是为什么.length工作在它，你可以看到选择器是否返回任何结果。

$('#elementID').length

因为jQuery以类似数组的方式存储它们，你可以通过使用典型的[]括号符号来单独访问它们。注意，这也将返回一个原始javascript HTMLElement。它将从其中移除包装的jQuery。

$('#elementID')[0] // returns the 1st element

由于在本例中，都返回 true 结果，因此它将继续进入if语句。

// On a side note: make sure to _not_ do simply:
if ( $('#elementID') ) { }

jQuery将返回一个空的jQuery包装对象(它将是- true -)，继续进入if语句。

指引你正确的方向:

var test = document.getElementById('test') //returns a HTML DOM Object
var test = $('#test') //returns a jQuery Object
var test = $('#test')[0] //returns a HTML DOM Object

它们实际上都与jQuery没有直接关系。$(selector)返回与选择器匹配的jQuery对象数组。因此，您可以使用Array。Length属性检查有多少个匹配项。同样，您可以通过它的从零开始的索引访问数组中的任何项。$(selector)[0]将返回数组中的第一个HtmlElement对象，$(selector)[1]将返回第二个。等等

虽然if ($(selector)[0])在某些情况下可以工作，但它不返回布尔值，因此条件有缺陷，不应该使用。相反，使用$(selector)。

相关文章：