jQuery получить ближайший к предыдущему элементу

Question

В этом примере у меня несколько тегов a. Под Structure, где вы можете увидеть мой unordered list, этот список был сгенерирован CMS, которую я использую. Но этот ul нуждается в раскрывающемся меню предыдущего a, которым в данном случае является Structure. Я пытаюсь добавить некоторые классы и атрибуты в structure, но с помощью кода, который я использую, он получает все элементы тегов a. Но мне нужен только элемент до ul

$('.custom-dropdown').each(function() {
    if($(this).children('ul').length) {
        $(this).addClass('dropdown');
        $(this).children('a').addClass('dropdown-toggle'); // the problem is here. I have tried closest(), .prev() but I couldn't use it properly to make it work
        $(this).children('a').attr({'role':'button','data-toggle':'dropdown','id':'navbarDropdown2'});
    }
});

<div class="dropdown-menu custom-dropdown" aria-labelledby="navbarDropdown">
   <a href="" class="nav-link">About Us</a>
   <a href="" class="nav-link">Structure</a>
   <ul>
      <li class="first nav-item">
         <a href="" class="nav-link">Organizational Chart</a>
      </li>
      <li class="last nav-item">
         <a href="" class="nav-link">Commissioner</a>
      </li>
   </ul>
   <a href="" class="nav-link">Mission</a>
   <a href="" class="nav-link">Strategies</a>
</div>

Answer 1

Учитывая структуру, чтобы найти все теги <a> с соответствующим ul в качестве следующего родственника, вы можете использовать:

$(this).find('ul>li>a').closest("ul").prev("a")

, который найдет, учитывая this==.custom-dropdown, любые ul (на любом уровне), который имеет li и a в качестве прямых потомков, затем используя .closest до go обратно к этому ul с .prev, чтобы получить соответствующий a, который соответствует.

Использование .prev(selector) выберет предыдущее, только если оно соответствует селектору, это то же самое, что .prev().filter(selector) - это не то же самое, что .prevAll().first() (или это .last, в любом случае).

Пример фрагмента с добавленным .hide просто для демонстрации его работы - обычно это делается путем добавления раскрывающихся классов / атрибутов.

$(".custom-dropdown").find('ul>li>a').closest("ul").hide().prev("a").addClass("red");

.red { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-menu custom-dropdown" aria-labelledby="navbarDropdown">
  <a href="" class="nav-link">About Us</a>
  <a href="" class="nav-link">Structure</a>
  <ul>
    <li class="first nav-item">
      <a href="" class="nav-link">Organizational Chart</a>
    </li>
    <li class="last nav-item">
      <a href="" class="nav-link">Commissioner</a>
    </li>
  </ul>
  <a href="" class="nav-link">Mission</a>
  <a href="" class="nav-link">Strategies</a>
</div>