jQuery - не уверен, какой метод использовать, closest () и parent () не работают - PullRequest
Новая
       12

jQuery - не уверен, какой метод использовать, closest () и parent () не работают

6 голосов
/ 19 апреля 2010

Боже, я чувствую, что я спам стека переполнения, это мой третий пост на сегодня. Извините, хе.

Я даже опубликовал вопрос об этом раньше, вроде как, но я немного изменил код с тех пор, так что я подумал, что было бы лучше опубликовать новый вопрос. 

$('.pmlist ul li h4 .toggle').click(function() {
    $(this).closest('.meddel').toggle(250);
});

Вот что у меня сейчас. Причина, по которой метод closest () не работает, заключается в том, что div .meddel находится рядом с элементом h4. И closest () сканирует только дерево DOM, игнорируя другие дочерние элементы. Правильно? parent () работает почти так же и не работает.

И так как я хочу переключать только ближайший div элемента .meddel в элементе, мне нужно что-то, да, просто захватывает ближайший, а не все.

Чтобы прояснить ситуацию, вот HTML-код для одного элемента списка: 

<li class="item">

<h4><a class="toggle">[topic]</a><small>2010-04-17 kl 12:54 by <u>[name]</u></small></h4>

<div class="meddel">
    <span>
        <img style="max-width: 70%; min-height: 70%;" src="profile-images/img.jpg" alt="" />
        <a href="account.php?usr=47">[name]</a>
    </span>

    <p>text</p>
</div>

</li>

У меня есть несколько подобных вещей, и если я щелкаю одну ссылку переключения, я просто хочу, чтобы ближайший .meddel был переключен, как упоминалось ранее.

Спасибо.

Ответы [ 3 ]

9 голосов
/ 19 апреля 2010

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

$(this).parent().next().toggle(250);

Обновление (согласно комментарию tvanfosson): 

$(this).parents(".item").find(".meddel").toggle(250);

Это гораздо более гибкое и безопасное решение. Сначала он получает контейнер ввода (.item), затем находит тело записи и переключает его. Он менее чувствителен к изменениям функций в DOM.

5 голосов
/ 19 апреля 2010

Вот еще один способ подойти к этому: 

$('.pmlist ul li h4 .toggle').click(function() { 
  $(this).closest('h4').siblings('.meddel').toggle(250); 
});

Это доходит до <h4>, а затем ищет элемент .meddel, который можно переключить. Подробнее о .siblings() можно прочитать здесь . Этот метод делает его немного более устойчивым к изменениям разметки, но если скрипт все равно тесно связан, это может не вызывать особого беспокойства.

3 голосов
/ 19 апреля 2010

Поднимитесь до элемента списка, затем найдите содержащийся элемент с соответствующим классом. Это будет более надежным в отношении большинства незначительных изменений в DOM, т. Е. Не зависит от относительного размещения. 

$('.pmlist ul li h4 .toggle').click(function() {
    $(this).closest('li').find('.meddel').toggle(250);
});
...