Как мне нацелиться на <a>внутри <div>?

Question

У меня есть этот код: http://jsfiddle.net/Qchmqs/BSKrG/

<div class="step"><-- this is darned wrong
    <div id="step2"><a>Darn</a></div>
    <div id="step2"><a>Darn</a></div>
    <div id="step2"><a>Darn</a></div>
</div>
<div class="step"><-- this works fine
    <div id="step2"><a>Darn</a>
    <a>Darn</a>
    <a>Darn</a></div>
</div>

Первый блок - это три ссылки внутри трех отдельных div внутри окружающего div

В нижнем блоке есть ссылки внутри одного родительского div

Я пытаюсь изменить фон активной ссылки, но она не выключается в верхнем блоке.

Скрипт хорошо работает с нижними ссылками, но не работает должным образом с верхними ссылками

PS: Активный класс должен переключаться только из ссылок. У меня есть много других скриптов на странице, которая использует .active ссылки из этого списка.

Answer 1

Для начала сделайте то, что сказал Джеймс Джонсон, и удалите несколько идентификаторов.Они могут только вызвать проблемы в будущем.

В верхних ссылках теги a не являются родственными, потому что вы помещаете каждый в свой собственный div.Поэтому вам нужно сделать это, чтобы удалить классы из других a s:

$(this).parent().siblings('div').children('a').removeClass('active');

http://jsfiddle.net/mblase75/BSKrG/1/

К сожалению, это нарушает функциональность нижних ссылок.Вы можете добиться успеха в обоих местах, добавив andSelf к родным братьям и сестрам:

$(this).parent().siblings('div').andSelf().children('a').removeClass('active');

http://jsfiddle.net/mblase75/BSKrG/2/

Answer 2

Это не работает на верхних, потому что вы присваиваете те же id для div.Вы, вероятно, должны использовать вместо этого атрибут класса:

<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>

После внесения вышеуказанных изменений вы сможете сделать это:

$(".step2 a").text("Hello World!");

Answer 3

Используя радиовходы, вы можете создать этот эффект вообще без JS, что изящно ухудшает его предполагаемый внешний вид (красный фон "черт") до чертовски рядом с радио (посылая ту же информацию).по иронии судьбы, этот пример в JSfiddle: http://jsfiddle.net/YvQdj/

Моя память немного размыта, но я уверен, что в старых версиях IE это не работает без каких-либо ошибок.

Answer 4

может быть, это:

<div class="step">
    <div id="step2"><a>Damn</a>
    <a>Damn</a>
    <a>Damn</a></div>
</div>
<div class="step">
    <div id="step2"><a>Damn</a>
    <a>Damn</a>
    <a>Damn</a></div>
</div>