javascript - .find() 与循环、each() 和 this 关键字的关系 - .find() 在本应为 2 时返回 4

Question

我需要检查是否有 <ul>存在于 <li> 内具有类 .sub-menu如果是这样，请将一个类添加到 <a> 内的 anchor 标记中.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()函数以及如何将其绑定(bind)到 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 - 为什么？能不能不要用this在.find() ？是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在循环中，它指的是循环通过的每个元素。但我想事实并非如此。

需要对此代码片段进行哪些更改，以便我可以使用 .sub-menu 命中这两个部分并相应地修改 DOM？

Answer 1

您使用 jQuery，因此您可以使用 each 方法来实现您想要的效果。请参阅下面的片段:

$(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>