Вопрос по jQuery?

Question

[budyakov]

Помогите разобраться с 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() уже не находит соседние ссылки и класс не убирается.

Вопрос: как отыскать соседние ссылки и убрать им ненужный класс?

Comments

[Riateche]

Id должны быть уникальными у всех элементов на странице. Это строгое правило.

[budyakov]

id итак уникальные, в конце порядкойвый номер для каждой ссылки свой.

Answer 1

[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');
})

Comments

[Makito]

а если еще закешировать в переменную

var elem = $('.links');

то будет намного быстрее.

[startsevdenis]

Спорить не буду я не спец в JS.

[budyakov]

Спасибо за ответ.

[spmbt]

Будет нЕмного (порядка 1 мс), а не нАмного. Потому что вычисляется по querySelectorAll в редких случаях кликов, что человеку совершенно незаметно.

Answer 2

[Talyutin]

Можно всем ссылка добавить класс link, например, (или data-, как рекомендуют на MSDN) и при клике убирать класс active у все элементов с классом link и добавлять класс active к нажатому элементу.

Comments

[budyakov]

Спасибо. У остальных ссылок уже есть прописанные классы, там что-то вроде class=«item active» при активной ссылке получается.

Answer 3

[Skpd]

$("#item_"+link_number).parent().parent().find('a').removeClass('active);
$("#item_"+link_number).addClass('active);

Comments

[budyakov]

Спасибо, помогло. Не знал, что можно несколько parent() подряд ставить для подъема по иерархии.

[Сергей Протько]

Никогда не используйте конструкции parent().parent(). Лучше использовать closest(), ибо разметка может измениться, и тогда придется менять и код.

[Skpd]

Код .closest('div') тоже не особо устойчив к изменению в вёрстке.
В любом случае лучше дать id / class общему контейнеру и ссылкам, тогда можно будет написать устойчивый к изменению в вёрстке код.

[budyakov]

Допустим у контейнера div есть класс container, в нем есть вложенные дивы, а в них ссылки с классом link. Как тогда будет выглядеть js?

[Сергей Протько]

$('.link').on('click', function(){
    $(this).addClass('active').closest('.container').find('a').not(this).removeClass('active');
});

Как-то так

[Сергей Протько]

в find лучше .link сделать, ну это уже на ваше усмотрение

[budyakov]

Большое спасибо!

Answer 4

[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');
});

Comments

[wscms]

Сори, забыл. Еще return false допишите, чтоб переходов небыло

$('#menu a').click(function(e){
      e.preventDefault();
      $('#menu a').removeClass('active');
      $(this).addClass('active');
      return false;
});