проблемы с обходом DOM

У меня есть HTML-код, который выглядит так:

<dl class="dropdown">  
    <dt><span>Gender</span><a href="">Go</a></dt>
    <dd class="shadow_50">  
        <ul>  
            <li><a href="#"><span class="option">male</span><span class="value">1</span></a></li>  
            <li><a href="#"><span class="option">female</span><span class="value">2</span></a></li>
       </ul>  
    </dd>
 </dl>

DD настроен на скрытие при нажатии на ссылку GO. У меня есть код, который сдвигает DD вниз или вверх. Однако мой вопрос заключается в том, что когда у меня есть более одного экземпляра, если они на странице, один щелчок открывает все DD на странице, как я могу настроить таргетинг на DD, который ближе всего к щелчку,

Я пробовал следующее,

$(".dropdown dt a").click(function(e) {
    $(this).closest("dd").slideToggle(defaults.speed);
e.preventDefault();
});

а также это,

$(".dropdown dt a").click(function(e) {
    $(this).next("dd").slideToggle(defaults.speed);
    e.preventDefault();
});

Хотя я еще не добился успеха.


jquery dom-manipulation dom-traversal
person Udders    schedule 03.10.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Ты пытался:

$(".dropdown dt a").click(function(e) {
    $(this).closest("dl").find("dd").slideToggle(defaults.speed);
    e.preventDefault();
});

Вы не можете использовать next(), потому что ваша ссылка имеет только SPAN в качестве брата и сестры, и вы не можете использовать ближайший, потому что он просто идет вверх по дереву

person Nicola Peluchetti    schedule 03.10.2011

arrow_upward
1
arrow_downward

У вас есть правильная идея, но методы, которые вы пробовали, работают не совсем так, как вы ожидаете. Вероятно, самым простым вариантом будет перейти к родителю, а затем найти соответствующий элемент:

$(this).parent().next().slideToggle(defaults.speed);

Ваши попытки не увенчались успехом по следующим причинам:

.closest проходит через DOM (он смотрит вверх, поэтому проверяет родителя, затем всех последующих предков до совпадения найден). В вашем случае требуемый элемент не является предком this, так что это не сработает.

.next получает следующий одноуровневый элемент текущего сопоставленного элемента. В вашем случае нет следующего брата, поскольку a является последним элементом в dt.

Обратите внимание, что если ваша структура DOM может измениться, вы можете использовать closest для доступа к элементу dl, а затем использовать .find для поиска dd (см. ответ @Nicola Peluchetti).

person James Allardice    schedule 03.10.2011

arrow_upward
0
arrow_downward

Пытаться;

    $(this).parent().siblings("dd").slideToggle(defaults.speed);
person graphicdivine    schedule 03.10.2011