добавить расширенные значения aria и tabindex к родителю на основе текущего URL

Question

Я создаю дерево WAI-ARIA на основе jQuery для сайта, который не имеет серверных возможностей.Из-за этого мой единственный способ динамического изменения меню - проверить текущий URL и сравнить его с текущим файлом.Для соответствия мне нужно сделать все эти вещи:

1. Добавить класс «current» к элементу <li>, который содержит элемент <a>, который соответствует URL текущей страницы
2. Добавьте класс «current» к элементу <li>, который содержит элемент <ul>, который содержит элемент <li>, который содержит элемент <a>, который соответствует URL текущей страницы
3. Установите для атрибута aria-expanded значение true в элементе <li>, указанном в номере 2 выше
4. Установите для атрибута tabindex значение 0 в дочернем элементе <a> элемента <li>нацелено на номер 2 выше (НЕ <a>, который на самом деле является текущей страницей)

Вот как должен выглядеть полученный HTML-код (если «owls.html» - текущая страница):

<nav id="nav-sub">
 <ul role="tree">
  <li role="treeitem" class="tree-parent current" aria-expanded="true"><a href="" tabindex="0">Birds</a>
    <ul role="group">
      <li role="treeitem"><a href="ducks.html">Ducks</a></li>
      <li role="treeitem"><a href="geese.html">Geese</a></li>
      <li role="treeitem" class="current"><a href="owls.html">Owls</a></li>
    </ul>
  </li>
  <li role="treeitem" class="tree-parent" aria-expanded="false"><a href="" tabindex="-1">Cats</a>
    <ul role="group">
      <li role="treeitem"><a href="lions.html">Lions</a></li>
      <li role="treeitem"><a href="tigers.html">Tigers</a></li>
    </ul>
  </li>
 </ul>
</nav>

Я получил этот кусочек jQuery для выполнения задач с 1 по 3:

$(document).ready( function () {
  var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
  $("#nav-sub li a[href='" + pathname  + "']").parents(".tree-parent").attr('aria-expanded', 'true');
  $("#nav-sub li a[href='" + pathname  + "']").parents("li").addClass("current");
});

Однако я новичок в JavaScript / jQuery, так что я неуверен, что это лучший или самый эффективный способ делать то, что я хочу.Если кто-нибудь может предложить лучший способ подойти к нему, я буду признателен за это!

Но я не знаю, как выполнить пункт 4, добавив значение tabindex к элементу <a> первого уровня, потому чтона самом деле это не родитель / предок элемента <a> текущей страницы.Что я могу добавить к своему сценарию, чтобы настроить таргетинг на этот элемент <a> и изменить его значение tabindex с -1 на 0?

Answer 1

var $treeParent = [current <a> element].closest('.tree-parent');
$('> a', $treeParent).attr('tabindex', 0);

Answer 2

Я бы, наверное, использовал

$("#nav-sub li a[href='" + pathname  + "']").closest('.tree-parent').next('a').attr('tabindex','0');

Кроме того, я бы, вероятно, установил переменную на $("#nav-sub li a[href='" + pathname + "']"), поэтому мне не нужно постоянно обходить дерево, чтобы получить его. Возможно, то же самое с деревом-родителем, если я использую его более одного раза.

Я действительно не проверял это - но что-то подобное должно получить то, что вы хотите.