Задать вопрос
budyakov
@budyakov
javascript

Вопрос по jQuery?

Помогите разобраться с jQuery, я в нем новичок и никак не могу понять вроде бы простую вещь.



Есть блок со ссылками:



<div><br>
<a href="#" id="item_1">1</a><br>
<a href="#" id="item_1">2</a><br>
<a href="#" id="item_1">3</a><br>
<a href="#" id="item_1">4</a><br>
</div><br>


и есть js, который при нажатии на одну из ссылок приписывает ей класс, а другим ссылкам этот класс убирает, т.е. в блоке может быть только одна активная ссылка.

$("#item_"+link_number).addClass('active').siblings().removeClass('active');<br>


Тут все работает как надо.



Но теперь каждую ссылку необходимо засунуть в свой div (или даже в 2)

<div><br>
   <div> <br>
      <a href="#" id="item_1">1</a><br>
   </div><br>
   <div> <br>
      <a href="#" id="item_2">2</a><br>
   </div><br>
   <div> <br>
      <a href="#" id="item_3">3</a><br>
   </div><br>
   <div> <br>
      <a href="#" id="item_4">4</a><br>
   </div><br>
</div><br>


В этом случае siblings() уже не находит соседние ссылки и класс не убирается.

Вопрос: как отыскать соседние ссылки и убрать им ненужный класс?
  • Вопрос задан
  • 3566 просмотров
2 комментария
Подписаться 2 Оценить 2 комментария
Пригласить эксперта
Ответы на вопрос 4
startsevdenis
@startsevdenis
Я бы попробовал сделать так, добавляем ко всем ссылкам класс «links»
<div>
   <div> 
      <a href="#" id="item_1" class="links">1</a>
   </div>
   <div> 
      <a href="#" id="item_2" class="links">2</a>
   </div>
   <div> 
      <a href="#" id="item_3" class="links">3</a>
   </div>
   <div> 
      <a href="#" id="item_4" class="links">4</a>
   </div>
</div>

а в js уже:
$(".links").click(function(){
    $(".links").removeClass('active');
    $(this).addClass('active');
})
Ответ написан
4 комментария
4 комментария
Talyutin
@Talyutin
Можно всем ссылка добавить класс link, например, (или data-, как рекомендуют на MSDN) и при клике убирать класс active у все элементов с классом link и добавлять класс active к нажатому элементу.
Ответ написан
1 комментарий
1 комментарий
Skpd
@Skpd 
$("#item_"+link_number).parent().parent().find('a').removeClass('active);
$("#item_"+link_number).addClass('active);
Ответ написан
7 комментариев
7 комментариев
wscms
@wscms
Дайте самому родительскому слою единственный ID и в нем ищите все ссылки. Какая внутри будет структура — не важно

<div id="menu">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>



$('#menu a').click(function(e){
e.preventDefault();
$('#menu a').removeClass('active');
$(this).addClass('active');
});
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Тестовое приложение для коннекта по SIP
20 апр. 2024, в 09:15
8000 руб./за проект
Сканер коэффициентов в букмекерских конторах
20 апр. 2024, в 08:39
100000 руб./за проект
Доработать бота
20 апр. 2024, в 08:24
1500 руб./за проект
Ещё заказы