Question

我正在使用CSS3 JQuery和HTML5构建动画搜索栏，我在Web上遇到了处理此问题的代码。但是，有一行代码我没有理解：

if ($(selector).closest('.class').length === 0)) {
   // do something

}

为什么我们要检查元素的长度是否为空？

Answer 1

从Selector（包括Selector元素本身）开始，它将向上移动DOM树并检查是否有任何元素.class。如果找到北方，它将执行代码。以下是官方文档中的示例代码。我用它来解释你的问题

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-i">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-i">III</li>
</ul>

如果你试试这个，你会看到1作为输出，因为它在向上移动DOM树时找到了一个ul元素。一旦找到，它就会停止。

 console.log($("li.item-a").closest("ul").length);

要证明其搜索包含元素本身
```
console.log($("li.item-a").closest("li"));
```
将输出

Object { 0: <li.item-a>, length: 1, prevObject: Object }

证明他一找到一个就回来了

    console.log($("li.item-a").closest("li.item-i"));

将输出

    Object { 0: <li#ii.item-i>, length: 1, prevObject: Object }

修改

它不会为空。

console.log($("li.item-a").closest("li.noClass"));

将返回

Object { length: 0, prevObject: Object }

For More info about .closest()

Answer 2

用简单的语言...... $（selector）找到元素 .closest找到与上述元素最接近的元素

例如 -

$(selector).closest('form').submit();

会将最接近的表单提交给选择元素

和'==='运算符匹配数据类型和不像==的值只匹配值

Answer 3

用于遍历的jQuery选择器或函数（即。children()，closest()或find()）总是返回一个jQuery对象，因此它永远不会null或{{1然后，这个对象包含一组与你的选择器和/或遍历函数匹配的元素，它还有一个undefined属性，表示这个集合的大小。
所以即使你的选择器什么都不匹配，你仍然有一个长度为0的jQuery对象。这就是为什么使用length属性来确定是否有任何结果。

这个JQuery语句的含义是什么？

3 个答案: