Селектор jQuery необходим для первого соответствующего элемента

Question

У меня есть следующий код:

<p class="expand">Click to expand</p>
<div class="expand-box">
   <p>Some content here</p>
</div>

с этим jquery:

$('.expander-box').hide();
$('.expand').toggle(function() {
   $(this).next('.expander-box').slideDown();
}, function() {
   $(this).next('.expander-box').slideUp();
});

У меня такой вопрос: этот код работает нормально, но если расширитель не напрямуюпосле тега p.expand он не будет работать.Есть ли лучший селектор для использования, а не next (), чтобы при щелчке он начинался с элемента, по которому щелкнули, и уходил вниз по странице, пока не нашел блок расширения, а затем выполнил анимацию для этого первого сопоставленного элемента? $ This

Answer 1

Вы можете использовать .nextAll() и :first, например:

$('.expander-box').hide();
$('.expand').toggle(function() {
   $(this).nextAll('.expander-box:first').slideDown();
}, function() {
   $(this).nextAll('.expander-box:first').slideUp();
});

Или намного проще с .click() и .slideToggle(), вот так:

$('.expander-box').hide();
$('.expand').click(function() {
   $(this).nextAll('.expander-box:first').slideToggle();
});

Обратите внимание, что оба из них найдут следующий .expander-box это брат , если он ещесложная структура Вам лучше знать структуру и использовать методы обхода дерева для перехода к элементу, начинающемуся с this, аналогично тому, как вы делаете это сейчас с простыми братьями и сестрами.*

Конечно, есть несколько вариантов, как и в большинстве случаев:

$(this).nextAll('.expander-box:first').slideToggle();
$(this).nextAll('.expander-box').first().slideToggle();
$(this).nextAll('.expander-box').eq(0).slideToggle();
//etc..

Answer 2

Вызов конструктора jQuery с двумя аргументами «укореняет» запрос во втором аргументе:

$ ('. Expander-box', this) возвращает все '.expander-box', которые children из this .
Итак, если вы сделаете ваш HTML похожим на это:

<p class="expand">Click to expand
<div class="expand-box">
   <p>Some content here</p>
</div>
</p>

Приведенный выше запрос будет делать то, что вы хотите.