Как пройти через дерево DOM без использования идентификаторов элементов в JQuery?

Question

У меня проблемы с обходом дерева DOM без использования идентификаторов элементов.

Вот структура HTML:

<dl id="dd-prefix-one" class="dropdown f-left">
  <dt><a href="#">Lorem<span class="value">ipsum</span></a></dt>
  <dd><ul>...</ul></dd>
</dl>

Вот JQuery, который я использую в данный момент:

$('#dd-prefix-one dt a').click(function() { 
    $('#dd-prefix-one dd ul').slideToggle();
    $('#dd-prefix-two dd ul, #dd-prefix-three dd ul, #dd-prefix-four dd ul, #dd-prefix-five dd ul').fadeOut(200); 
});

Этот JQuery повторяется в моем коде 5 раз только с изменением идентификаторов ... отсюда необходимость отойти от специфичности идентификатора.

Я пытался использовать .prevUntil () ... хотя, должно быть, что-то пропустил.

Любая помощь будет высоко ценится, спасибо

Answer 1

Что-то вроде этого должно работать (не проверено)

$('dl.dropdown dt a').click(function() {
    $(this).closest('dl').find('ul').slideToggle();
    $('dl.dropdown dt a').not(this).find('ul').fadeOut(200);
});

Answer 2

с вставленным кодом:

<dl id="dd-prefix-one" class="dropdown f-left">
  <dt><a href="#">Lorem<span class="value">ipsum</span></a></dt>
  <dd><ul>...</ul></dd>
</dl>

Вы можете использовать что-то вроде:

$('dl dt a').click(
    function() {
        $(this).closest('dl').find('ul').slideToggle();
        $(this).closest('dl').siblings().find('ul').fadeOut(200);
        return false;
    });

Демонстрация JS Fiddle .

Answer 3

Абстрагируйте это как функцию, которая принимает идентификатор в качестве аргумента.