issue with finding the next element jquery

Question

I have a question about the behavior of next(), in the code below if I try to use next() to find the next span it works, but if I try to find the next div it doesn't work

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div>
    <span>span 1 before</span>
    <a href="#button">button 1</a>
    <span>span 1 after</span>
    <div>div 1 after</div>
</div>
<div>
    <span>span 2 before</span>
    <a href="#button">button 2</a>
    <span>span 2 after</span>
    <div>div 2 after</div>
</div>

<script>
$("a").click(function () {
    // works:
    // alert($(this).next("span").text());

    // doesn't work:
    alert($(this).next("div").text());
});
</script>