3

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

我见过的一种方法如下，我想我理解了：

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

我看到的另一种我不太理解的方法如下：

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

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

谢谢你。

4

4 回答 4

4

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。因此，如果您不确定，我会推荐第一个约定，因为它在更广泛的情况下更安全。但对于这种特殊情况，任何一个选项都有效。

于 2013-03-05T15:52:13.273 回答
2

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

$('#elementID').length

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

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

由于在这种情况下，两者都返回一个真实的结果，它将继续进入if语句。

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

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

于 2013-03-05T15:54:16.107 回答
1

为您指明正确的方向：

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
于 2013-03-05T15:57:32.880 回答
1

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

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

于 2013-03-05T16:04:53.410 回答