.find() 与循环、each() 和 this 关键字的关系 - .find() 在它应该只有 2 时返回 4

Question

我需要检查 <li> 中是否存在具有 .sub-menu 类的 <ul>，如果存在，请将类添加到 <a> 上方 .sub-menu 标记内的锚标记中

Using jQuery to see if a div has a child with a certain class

How to detect if any child elements within a parent element has a certain class?

以上是我的参考答案。

我正在尝试遍历每个列表并检查.find() 我不明白如何在循环中使用.find() 或each() 函数以及如何将其与this 关键字联系起来。

我也尝试了.children()，但它抛出 children() 不是函数

请参见下面的第一个示例。

$(function(e) {
var getMenuItems = $(".item");
  for (var i = 0; i < getMenuItems.length; i++) {
    if (this.find("ul.sub-menu") !== 0) {
      console.log("sub-menu found")
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
   </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
</ul>

它抛出this.find is not a function - 为什么？不能在.find() 中使用this 吗？ this 不是指我认为的吗？

我不明白。

我也试过这个：

$(function(e) {
var getMenuItems = $(".item");
  for (var i = 0; i < getMenuItems.length; i++) {
    if (getMenuItems.find("ul.sub-menu") !== 0) {
      console.log("sub-menu found")
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
   </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
</ul>

错误消失了，但是当我期望它是 2 时它记录了 4 次。这是因为我认为它只是循环了 4 次？为什么.find() 在这个例子中不起作用？在这些示例中，this 到底指的是什么？我的理解是，如果您在循环中使用this，它指的是它循环通过的每个元素。但我想情况并非如此。

此代码 sn-p 需要更改什么，以便我可以使用 .sub-menu 访问 2 个部分并相应地修改 DOM？

Answer 1

您使用 jQuery，因此您可以使用 each 方法来实现您想要的。参见下面的 sn-p：

$(function(e) {
  var getMenuItems = $(".item");
  getMenuItems.each(function( index ) {
  	if ($(this).find("ul.sub-menu").length > 0) {
      console.log("sub-menu found")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
   </li>
  <li class="item">
    <a href="#"></a>
  </li>
  <li class="item">
    <a href="#"></a>
    <ul class="sub-menu">
        <li></li>
    </ul>
  </li>
  <li class="item">
    <a href="#"></a>
  </li>
</ul>

Answer 2

几个问题：

• 在传递给$()的回调中，this是文档DOM对象。另一方面，.find 是一个 jQuery 方法——不是 DOM 方法——所以这解释了第一次尝试中的错误。请注意，一般情况下，您应该在 jQuery 回调中使用 $(this)（也有例外），这样您就可以调用像 .find 这样的方法。

• 与零比较不是测试find 是否返回匹配项的正确方法。 find 返回一个类似数组的 jQuery 对象，所以你真的应该这样做：

  if ($(this).find("ul.sub-menu").length !== 0)
  

• 虽然 $(this) 现在返回一个 jQuery 对象，但它在 for 循环的每次迭代中都是 相同 对象，因此您会得到 4 个输出，并且在每种情况下都是经过测试的 @987654331 @ 值实际上是 2。您实际上希望 this 引用 getMenuItems 中的元素。为此，使用传递给getMenuItems.each 的回调。在那里this 将引用一个“项目”元素。那么上面的if条件就会变成正确的：

  getMenuItems.each(function () {
      if ($(this).find("ul.sub-menu").length !== 0) {
          console.log("sub-menu found");
      }
  }); 
  

但我建议根本不要使用find，而是使用更智能的选择器：

$(function() {
    $(".item > ul.sub-menu").each(function () {
       console.log("sub-menu found");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <a href="#">A</a>
    <ul class="sub-menu"><li>Sub A.1</li></ul>
   </li>
  <li class="item">
    <a href="#">B</a>
  </li>
  <li class="item">
    <a href="#">C</a>
    <ul class="sub-menu"><li>Sub C.1</li></ul>
  </li>
  <li class="item">
    <a href="#">D</a>
  </li>
</ul>