Tengo una pregunta sobre el comportamiento de next(), en el siguiente código, si trato de usar next() para encontrar el siguiente intervalo, funciona, pero si trato de encontrar el siguiente div, no funciona.
<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>.next seleccionará al siguiente hermano si coincide con el selector pasado . Dado que el siguiente hermano de <a> es <span> , .next solo funcionará si hace .next('span') .
Si desea seleccionar cualquier hermano siguiente, use .nextAll .
$("a").click(function() { console.log($(this).nextAll("div").text()); }); <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> Solo para ilustrar, cambiar la ubicación del intervalo con el div también da como resultado que el div se encuentre con .next .
$("a").click(function() { console.log($(this).next("div").text()); }); <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> <div>div 1 after</div> <span>span 1 after</span> </div> <div> <span>span 2 before</span> <a href="#button">button 2</a> <div>div 2 after</div> <span>span 2 after</span> </div>