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