接下来可以在jQuery中解释这种奇怪的行为吗？

Question

有用:

<div class="xpav">
    Create
</div>
<div class="apr" style="display: none;">
    sometext
</div>

<script>
$('.xpav').click(function() {
    $(this).next(".apr").slideDown("fast");    
})
</script>

它没有:

<div class="xpav">
    Create
</div>
<br />
<div class="apr" style="display: none;">
    sometext
</div>

<script>
$('.xpav').click(function() {
    $(this).next(".apr").slideDown("fast");    
})
</script>

为什么
打破它？

Answer 1

.next()只查看给定元素后面的元素,然后检查该元素是否与选择器一起提供.在你的第二个例子中,因为它br在那里并且没有apr类,所以它没有被拾取.来自API文档:

描述:获取匹配元素集中每个元素的紧随其后的兄弟.如果提供了选择器,则仅当它与该选择器匹配时,它才会检索下一个兄弟.

您的第二个示例需要使用.nextAll()而不是搜索所有下一个兄弟姐妹:

$('.xpav').click(function() {
    $(this).nextAll(".apr").slideDown("fast");    
});

要仅选取.apr匹配的第一个,请使用.eq(0):

$('.xpav').click(function() {
    $(this).nextAll(".apr").eq(0).slideDown("fast");    
});