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");    
});

Answer 2

在我的印象next()下只有在兄弟对象是相同的DOM格式时才有效，

工作原理是什么：

$('.xpav').click(function() {
    console.log($(this).next(".apr"));
    $(this).siblings(".apr").slideDown("fast");    
})

Answer 3

正是文档所说的内容：“描述：获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了一个选择器，它只检查下一个兄弟，如果它匹配那个选择器。”

http://api.jquery.com/next/

Answer 4

因为next()会将您带到下一个<br />的DOM元素。为什么不用这个：

$(".apr").slideDown("fast");

Answer 5

只是因为您在代码中使用了next()方法。代码的第二个版本中$('.xpav')的下一个DOM元素是<br />，因为它与过滤器不匹配，所以不会向下滑动任何内容！

如果你希望它工作，你应该考虑使用nextAll()而不是next()，因为后者只能获得下一个DOM元素，前者获取所有兄弟姐妹后面的所有兄弟姐妹DOM。

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

5 个答案: