如果id不存在,为什么$('#id')返回true？

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)中的程序流的绝佳方法.