1

Tengo este código:

$(function(){
    const bloques = $('#main')
    bloques.each(()=>{
        console.log($(this).find('h1').text())
    })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
        <div id="main">
            <div id="bloque1">
                <h1 class="titulo">SEDANS</h1>
                <p class="parrafo">Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip</p>
            </div>
            <div id="bloque2">
                <h1 class="titulo">SUVS</h1>
                <p class="parrafo">Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
            </div>
            <div id="bloque3">
                <h1 class="titulo">LUXURY</h1>
                <p class="parrafo">Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style</p>
            </div>
        </div>
    </body>

Con JQuery estoy intentando acceder a los h1 de cada div de mi #main. No sé bien cómo funciona la función each, pensé que era estilo for in, pero el punto es que me imprime en una sola línea el contenido de cada h1 de cada <div> hijo de <div id="main">.

Mi intención es que en cada iteración del objeto bloques, se imprima por consola el texto de los h1 de cada uno de los div hijos del div main.

Lo que quiero como resultado es que se imprima:

SEDAN
SUVS
LUXURY

Pero lo que imprime es:

SEDANSUVSLUXURY

2 respuestas 2

2

No necesitas usar find dentro del each, propongo acceder al h1 en la instancia de bloques con #main h1:

const bloques = $('#main h1');

Al usar #main h1 le dices que recupere todos los h1 que están dentro de #main (allí ya tienes la lista de h1 para poder recorrerlos).

Y luego recorres todos los h1 en el each y utilizando this accedes al texto, de esta forma te evitas utilizar el find y si te das cuenta es como utilizar un for in o el tradicional foreach, tu código quedaría de la siguiente forma:

$(function(){
    const bloques = $('#main h1');
    bloques.each(function() {
        console.log($(this).text());
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div id="main">
        <div id="bloque1">
            <h1 class="titulo">SEDANS</h1>
            <p class="parrafo">Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip</p>
        </div>
        <div id="bloque2">
            <h1 class="titulo">SUVS</h1>
            <p class="parrafo">Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
        </div>
        <div id="bloque3">
            <h1 class="titulo">LUXURY</h1>
            <p class="parrafo">Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style</p>
        </div>
    </div>
</body>

1

Puedes lograr lo que quieres utilizando function() en el each() en lugar de ()=> asi:

$(function(){
    const bloques = $('#main1').find("div")
    bloques.each(function(){
        console.log($(this).find('h1').text())    
    })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
        <div id="main1">
            <div id="bloque1">
                <h1 class="titulo">SEDANS</h1>
                <p class="parrafo">Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip</p>
            </div>
            <div id="bloque2">
                <h1 class="titulo">SUVS</h1>
                <p class="parrafo">Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
            </div>
            <div id="bloque3">
                <h1 class="titulo">LUXURY</h1>
                <p class="parrafo">Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style</p>
            </div>
        </div>
    </body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.