Присвоение класса тегу li для одного и того же класса, указанного несколько раз

Question

У меня есть два меню ul, у которых один и тот же класс. Когда я кликаю на li, у меня происходит присвоение класса данному li, но это происходит только в одном из ul, на котором произошел клик. Мне необходимо, что бы при клике в любом из меню ul с одинаковым классом происходило присвоение класса двум меню ul одновременно. Т.е. кликнул на li со значением "3" и оно выделилось в двух меню. Понимаю, что это наверное просто, но я уже давненько не занимался кодингом, и подзабыл. Пробовал метод each(), не получилось. Скорее всего, дело тут $(this).addClass('active'), поправьте, если ошибаюсь. Помогите, пожалуйста. Спасибо.

$('.menu').each(function (){
        $('.menu li').on('click', function(){
          $('.menu li').removeClass('active');
          $(this).addClass('active');   
        });
});

.menu {
  list-style: none;
}

.menu li {
  cursor: pointer;
}

.active {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

<ul class="menu">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

Answer 1

let uls = document.querySelectorAll('ul')

uls.forEach(c => {
 const l = c.querySelectorAll('li')
l.forEach(t => {
  t.addEventListener('click', q => {
 const text = t.innerHTML
 uls.forEach(w => {
   const li = w.querySelectorAll('li')
   li.forEach(f => {
     const sameText = f.innerHTML         
     if(sameText == text) {
       f.classList.toggle('active')           
     }
   })
 })
  })
})
})

.menu {
  list-style: none;
}

.menu li {
  cursor: pointer;
}

.active {
  color: green;
}

<ul class="menu">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

<ul class="menu">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

Answer 2

Легче, конечно, дать одинаковые id элементам в li и по ним искать

const $$ = (selector) => document.querySelectorAll(selector);
const menu_s = $$('ul.menu');

menu_s.forEach(ul => {
  const children = Array.from(ul.children);
  children.forEach(li => {
    li.addEventListener('click', (e) => {
      const target = e.target;
      menu_s.forEach(ul1 => {
        const children1 = Array.from(ul1.children);
        children1.forEach(li1 => {
          
          if (li1.innerText == target.innerText) {
            li1.classList.toggle('active');  
          } else {
            li1.classList.remove('active');
          }
        });
      })
    });
  });
});

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.menu__wrapper {
  display: flex;
}

.menu {
  list-style: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.menu + * {
  margin-left: 20px;
}

.menu li {
  cursor: pointer;
  padding: 18px;
  border: 3px solid black;
  transition: background-color 0.2s ease-in-out,
              color 0.2s ease-in-out,
              border-color 0.2s ease-in-out;
}

.menu li:hover {
  border-color: tomato;
}

.menu li + li {
  margin-top: 5px
}

.menu li.active {
  color: white;
  background-color: green;
}

<div class="menu__wrapper">
  <ul class="menu">
   <li>1</li>
   <li>2</li>
   <li>3</li>
  </ul>

  <ul class="menu">
   <li>1</li>
   <li>2</li>
   <li>3</li>
  </ul>
</div>

Answer 3

Поиск нужных li можно упростить через CSS-селектор (хотя он и так уже был бы не сложным, если номер элемента найден):

$(".menu").on("click", "li", function(e) {
  let index = $(this).parent().children().index(this);
  // Номер кликнутого li среди всех соседей (считая с нуля)
  
  $(".menu li.active").removeClass("active");
  $(".menu li:nth-of-type(" + (index + 1) + ")").addClass("active");
  // Достаются все li по этому номеру (здесь оно считается с 1, поэтому +1)
});

.menu {
  list-style: none;
}

.menu li {
  cursor: pointer;
}

.active {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ul class="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

А на JS можно записать так:

let ul_menu = document.querySelectorAll("ul.menu");
for (let i = 0; i < ul_menu.length; i++) {
  ul_menu[i].addEventListener("click", toggle_li_bg);
}

function toggle_li_bg(e) {
  if (!e.target.matches("li")) return;
  // Кликнули не на li - прервать.  
  
  let li = e.target;
  let index = [].indexOf.call(li.parentNode.children, li);
  // Номер - найден
  
  for (let menu of ul_menu) {
    let active = menu.querySelector("li.active");
    if (active) active.classList.remove("active");
    
    menu.children[index].classList.add("active");
  }
}

.menu {
  list-style: none;
}

.menu li {
  cursor: pointer;
}

.active {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ul class="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

БЛОГ НА HUSL

Присвоение класса тегу li для одного и того же класса, указанного несколько раз

Ответы (3 шт):