Question

我总是想知道为什么如果我试图通过DOM结构中不存在的id选择器来查找元素，jQuery会返回true。

像这样：

<div id="one">one</div>

<script>
    console.log( !!$('#one') ) // prints true
    console.log( !!$('#two') ) // is also true! (empty jQuery object)
    console.log( !!document.getElementById('two') ) // prints false
</script>

我知道我可以使用!!$('#two').length因为长度=== 0如果对象是空的，但我认为选择器会在找到时返回该元素，否则null（如同原生document.getElementById确实如此。

F.ex，这个逻辑不能在jQuery中完成：

var div = $('#two') || $('<div id="two"></div>');

如果未找到ID选择器返回null，那么更合乎逻辑吗？

人

Answer 1

选择此行为是因为否则jQuery会定期抛出NullReference异常

几乎所有jQuery函数都返回一个jQuery对象作为有问题的Dom元素的包装器，因此你可以使用点表示法。

$("#balloon").css({"color":"red"});

现在假设$("#balloon")返回 null 。这意味着$("#balloon").css({"color":"red"}); 会抛出一个错误，而不是像你期望的那样默默无闻。

因此，您只需使用.length或.size()。

Answer 2

这就是jQuery的工作原理。

$("#something")

对象0 = div＃something length = 1 jquery = 1.2.6

$("#nothing")

对象长度= 0 jquery = 1.2.6

Answer 3

你可以通过访问元素的长度来接近你想做的事情，并与三元运算符结合起来：

console.log(!!$('#notfound').length);  // false
console.log(!!$('#exists').length);    // true
var element= $('#notfound').length ? $('#notfound') : $('#exists');
console.log(element.attr('id'));  // outputs 'exists'

至于问题的核心：

如果ID不合逻辑如果找不到，选择器返回null？

不，不是JQuery的做事方式 - 即支持JQuery语句的链接：

    $('#notfound').hide("slow", function(){
      jQuery(this)
        .addClass("done")
        .find("span")
          .addClass("done")
        .end()
        .show("slow", function(){
          jQuery(this).removeClass("done");
        });
    });

即使notfound不存在，此代码也会在不停止脚本执行的情况下运行。如果初始选择器返回null，则必须添加if / then块以检查null。如果addClass，find，end和show方法返回null，则必须添加if / then块来检查每个方法的返回状态。链接是一种处理动态类型语言（如Javascript）中的程序流的绝佳方法。

Answer 4

它返回true，因为对于Javascript它是一个已定义的对象因此不是false，并且jQuery将始终为您提供一个新对象，无论该元素是否被找到 - 但是数组长度将为零，例如。

$("span").length

如果您没有<span>，则该值为零，但可能为1或更多。

您可以编写自己的插件，以避免重复if语句作为Jquery插件，就像我为this one所做的那样。这很容易做到：

(function($)
{
        /* Checks if a jQuery object exists in the DOM, by checking the length of its child elements. */
        $.fn.elementExists = function()
        {
                ///     <summary>
                ///     Checks if a jQuery object exists in the DOM, by checking the length of its child elements.
                ///     </summary>
                ///     <returns type="Boolean" />
                return jQuery(this).length > 0;
        };
})(jQuery);

<强>用法：

if ($("#someid").elementExists())
{

}

Answer 5

您可以检查jQuery对象的.length属性。像这样：

if($("#two").length > 0) { // exists...

} else { // doesn't exist

}

Answer 6

简而言之，您可以将jQuery选择器返回值视为包含0..n元素的组，但永远不会为null。

您可能真正感兴趣的是$("#two")[0]，它将为您提供选择器返回的第一个实际元素。

如果id不存在，为什么$（'＃id'）返回true？

6 个答案: