javascript - jQuery: esto: “$(this).next(). next()” funciona, pero “$(this).next(''. div'')” no

Question

De acuerdo, estoy tratando de que este conjunto de información se oculte individualmente.

<img class="arrow" src="images/navigation/arrowright.png">
<H2>More Information</H2>
<div class="box">
    <h2>Bibendum Magna Lorem</h2>
    <p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>

<img class="arrow" src="images/navigation/arrowright.png">
<H2>A Second Group of Information</H2>
<div class="box">
    <h2>Bibendum Magna Lorem</h2>
    <p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>

Funciona cuando escribo esto:

$(".arrow").click(function() {
    $(this).next().next().slideToggle();
});

pero no cuando hago esto

$(".arrow").click(function() {
    $(this).next(''.box'').slideToggle();
});

¿Qué está pasando que hace que la segunda opción no funcione? ¡He estado en eso por días y no puedo entenderlo! ¡Aprecio tu aporte!

Answer 1

El problema

Si mira la documentation de .next(selector) , no "encuentra" al próximo hermano que coincida con el selector. Más bien, mira a JUST el siguiente hermano y SOLO devuelve ese elemento si coincide con el selector que no es lo que usted quiere.

.next() es lo que dice el documento para .next() :

Descripción: Obtenga el hermano inmediatamente siguiente de cada elemento en el conjunto de elementos coincidentes. Si se proporciona un selector, recupera al siguiente hermano solo si coincide con ese selector.

Entonces, puede ver que .next(".box") mirará el elemento h2 que sigue inmediatamente a su elemento .arrow (que es el siguiente elemento relacionado) y luego lo comparará con el selector de .box y, dado que no coincide , devolverá un objeto jQuery vacío.

Una solución usando .nextAll ()

Si desea que el próximo hermano que coincida con un selector, puede usar esto:

$(this).nextAll(".box").eq(0).slideToggle();

Esto encuentra todos los hermanos que siguen que coinciden con el selector y luego extrae solo el primero.

Crea tu propio método .findNext ()

Muchas veces me he preguntado por qué jQuery no tiene un método para esto que yo mismo he creado uno:

// get the next sibling that matches the selector
// only processes the first item in the passed in jQuery object
// designed to return a jQuery object containing 0 or 1 DOM elements
jQuery.fn.findNext = function(selector) {
    return this.eq(0).nextAll(selector).eq(0);
}

Y, entonces solo usarías:

$(this).findNext(".box").slideToggle();

Opción: agregar más estructura al HTML para hacer las cosas más simples y más flexibles

Para su información, un enfoque común para problemas como este es colocar un div que contiene alrededor de cada conjunto de elementos DOM como este:

<div class="container">
    <img class="arrow" src="images/navigation/arrowright.png">
    <H2>More Information</H2>
    <div class="box">
            <h2>Bibendum Magna Lorem</h2>
            <p>Cras mattis consectetur purus sit amet fermentum.</p>
    </div>
</div>

<div class="container">
     <img class="arrow" src="images/navigation/arrowright.png">
     <H2>A Second Group of Information</H2>
     <div class="box">
            <h2>Bibendum Magna Lorem</h2>
            <p>Cras mattis consectetur purus sit amet fermentum.</p>
     </div>    
</div>

Luego, puede usar un código que sea un poco menos sensible al posicionamiento exacto de los elementos:

$(".arrow").click(function() {
    $(this).closest(".container").find(".box").slideToggle();
});

Esto va hasta el padre que lo contiene y el padre común utilizando .closest() y luego usa .find() para encontrar el elemento .box en ese grupo.