Question

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

我看到的一种方式是以下，我想我明白了：

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

我看到这样做的另一种方式我不太明白如下：

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

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

谢谢。

Answer 1

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

所以最后，两者都是“如果选择了元素”的简写

我最初说第二个是危险的。这在jQuery案例中实际上并不正确，因为jQuery / DOM对象总是很简单。通常虽然使用if(element)检查元素是否存在是危险的，因为这将为0或“”等值返回false。因此，如果您不确定，我会推荐第一个约定，因为它在更广泛的情况下更安全。但对于这种特殊情况，任一选项都有效。

Answer 2

jQuery包装对象的所有元素/ etc都以类似数组的方式存储在内部，因此.length可以使用它，并且您可以看到选择器是否返回任何结果。

$('#elementID').length

由于jQuery以类似Array的方式存储它们，因此您可以使用典型的[]括号表示法单独访问它们。请注意，这也会返回原始javascript HTMLElement。它删除了包装它的jQuery。

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

因为在这种情况下，两者都会返回 truthy 结果，所以它会继续进入 if 语句。

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

jQuery将返回一个空的jQuery包装对象（将是-truthy-），继续进入 if 语句。

Answer 3

指出正确的方向：

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

Answer 4

它们都没有与jQuery直接相关。 $（selector）返回与选择器匹配的jQuery对象数组。因此，您可以使用Array.length属性来检查有多少匹配。同样，您可以通过它的从零开始的索引访问数组中的任何项目。虽然$（selector）[0]将返回数组中的第一个HtmlElement对象，但$（selector）[1]将返回第二个。等等。

虽然if（$（selector）[0]）在某些情况下可能有效，但它不会返回布尔值，因此条件存在缺陷且不应使用。相反，使用$（selector）.length＆gt; 0

.length和[0]之间的区别是检查具有ID的元素是否存在

4 个答案: