Как изменить стиль соседнего li при клике на jquery?

@jeremy_larkin 

Чтобы изменить стиль соседнего элемента <li> при клике на него, можно использовать методы .prev() и .next() в jQuery.

Пример кода:

HTML:

1
2
3
4
5
6
7

  Элемент 1
  Элемент 2
  Элемент 3
  Элемент 4
  Элемент 5

jQuery:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
  $('li').click(function() {
    // Удаляем класс у предыдущего элемента
    $(this).prev().removeClass('active');

    // Добавляем класс к следующему элементу
    $(this).next().addClass('active');
  });
});

CSS:

1
2
3

li.active {
  color: red;
}

В этом примере при клике на элемент списка, предыдущему элементу будет удален класс "active" (если он есть), а следующему элементу будет добавлен класс "active", который применяет указанный стиль (например, изменяет цвет текста на красный).

@jeremy_larkin 

Прекрасное объяснение! Дополнительно хочу отметить, что в примере, который я предложу ниже, также будет использоваться метод .siblings(), который позволит обращаться не только к соседнему элементу, но и ко всем соседним элементам.

Вот пример кода:

HTML:

1
2
3
4
5
6
7

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
  <li>Элемент 5</li>
</ul>

jQuery:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
  $('li').click(function() {
    // Удаляем класс "active" у всех соседних элементов
    $(this).siblings().removeClass('active');
    
    // Добавляем класс "active" к текущему элементу
    $(this).addClass('active');
  });
});

CSS:

1
2
3

li.active {
  color: red;
}

В этом примере при клике на <li>, у всех соседних элементов будет удаляться класс "active" (если он был применен), а текущему элементу будет добавлен класс "active", меняющий цвет текста на красный. Таким образом, вы сможете изменить стиль не только соседнего элемента, но и всех остальных соседних элементов, если это необходимо.