проблемы с обходом DOM - PullRequest
Новая
       9

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

1 голос
/ 03 октября 2011

У меня есть такой 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>

* * * * * * * * * * * * * * * * * * * * При нажатии на ссылку GO устанавливается DD. У меня есть некоторый код, который перемещает 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();
});

Я пока не добился успеха.

Ответы [ 3 ]

1 голос
/ 03 октября 2011

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

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

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

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

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

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

0 голосов
/ 03 октября 2011

Постарайтесь; 

    $(this).parent().siblings("dd").slideToggle(defaults.speed);
0 голосов
/ 03 октября 2011

Вы пробовали: 

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

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

...