第一个匹配元素需要 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 这是同级< /strong>，如果它是一些更复杂的结构，您最好了解该结构并使用 树遍历方法导航到以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' >这个。
因此，如果您使 HTML 看起来像这样：

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

上面的查询将执行您希望它执行的操作。