接下來有人可以在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");    
});

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()會將您帶到直接的下一個DOM元素<br /> 。 為什么不使用這個：

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

Answer 5

僅僅是因為您在代碼中使用了next()方法。 第二個版本的代碼中$('.xpav')中的下一個DOM元素是<br /> ，由於它與過濾器不匹配，因此它不會向下滑動！

如果您希望它工作，則應考慮使用nextAll()而不是next() ，因為后者僅獲取下一個DOM元素，前者獲取DOM中緊隨其后的所有同級兄弟。