Соотношение

Question

Мне нужно проверить, существует ли <ul> внутри <li>, который имеет класс .sub-menu, и, если это так, добавить класс к тегу привязки внутри тега <a> над .sub-menu* 1006.*

Использование jQuery для определения, имеет ли div дочерний элемент с определенным классом

Как определить, есть ли у дочерних элементов в родительском элементе определенный класс?

Выше приведены мои справочные ответы.

Я пытаюсь перебрать каждый список и проверить с помощью .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 - почему?Разве вы не можете использовать 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>

Ошибка исчезает, но она регистрируется 4 раза, когда я ожидаю, что это 2. Это потому, что я думаю, что это просто цикл 4 раза?Howcome .find() не работает в этом примере?Что именно означает this в этих примерах?Насколько я понимаю, если вы используете this в цикле, это относится к каждому элементу, через который он проходит.Но я думаю, что это не так.

Что нужно изменить с помощью этого фрагмента кода, чтобы я мог нажать 2 раздела с помощью .sub-menu и соответственно изменить DOM?

Answer 1

Несколько проблем:

• При обратном вызове, переданном $(), this является объектом DOM документа.С другой стороны, .find - это метод jQuery, а не метод DOM, который объясняет ошибку с первой попытки.Обратите внимание, что в общем случае вы должны использовать $(this) в обратных вызовах jQuery (есть исключения), которые затем позволяют вам вызывать методы типа .find.

• Сравнение с нулем не являетсяправильный способ проверить, возвращает ли find совпадение.find возвращает объект jQuery, похожий на массив, поэтому вам действительно следует сделать следующее:

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

• Хотя $(this) теперь возвращает объект jQuery, это один и тот же объект в каждой итерации цикла for, и поэтому вы получаете 4 выхода, и в каждом случае проверенное значение .length фактически равно 2. На самом деле вы хотите, чтобы this ссылался на элементы вgetMenuItems.Для этого используйте обратный вызов, переданный на getMenuItems.each.Там this будет ссылаться на элемент item.Тогда приведенное выше условие 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>

Answer 2

Вы используете 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>