Estoy tratando de seleccionar cada primer elemento de una serie de bloques múltiples, pero no sé cómo hacerlo :(
Aquí hay un ejemplo de lo que he probado:
let everyItems = Array.from(document.querySelectorAll('.block .item')); let firstItems = Array.from(everyItems[0]); document.getElementById('every1stItem').innerText = firstItems.innerText; <div calss="block"><b>First block</b> <div class="item">Item 1.1</div> <div class="item">Item 1.2</div> <div class="item">Item 1.3</div> <div class="item">Item 1.4</div> </div> <div calss="block"><b>Second block</b> <div class="item">Item 2.1</div> <div class="item">Item 2.2</div> <div class="item">Item 2.3</div> <div class="item">Item 2.4</div> </div> <div calss="block"><b>Third block</b> <div class="item">Item 3.1</div> <div class="item">Item 3.2</div> <sdivan class="item">Item 3.3</div> <div class="item">Item 3.4</div> </div> <div> <b>The first item of every block is :</b> <div id="every1stItem"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Gracias por ayudarme !
puedes hacer algo como esto
let everyItems = Array.from(document.querySelectorAll('.block')); let firstItems = everyItems.map(i => i.children[1].innerText).join(', ') document.getElementById('every1stItem').innerText = firstItems; <div class="block"><b>First block</b> <div class="item">Item 1.1</div> <div class="item">Item 1.2</div> <div class="item">Item 1.3</div> <div class="item">Item 1.4</div> </div> <div class="block"><b>Second block</b> <div class="item">Item 2.1</div> <div class="item">Item 2.2</div> <div class="item">Item 2.3</div> <div class="item">Item 2.4</div> </div> <div class="block"><b>Third block</b> <div class="item">Item 3.1</div> <div class="item">Item 3.2</div> <div class="item">Item 3.3</div> <div class="item">Item 3.4</div> </div> <div> <b>The first item of every block is :</b> <div id="every1stItem"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>usando el selector :nth-child(n)
let everyItems = $('.item:nth-child(2)'); $('#every1stItem').html(everyItems) <div> <b>The first item of every block is :</b> <div id="every1stItem"></div> </div> <hr> <div class="block"><b>First block</b> <div class="item">Item 1.1</div> <div class="item">Item 1.2</div> <div class="item">Item 1.3</div> <div class="item">Item 1.4</div> </div> <div class="block"><b>Second block</b> <div class="item">Item 2.1</div> <div class="item">Item 2.2</div> <div class="item">Item 2.3</div> <div class="item">Item 2.4</div> </div> <div class="block"><b>Third block</b> <div class="item">Item 3.1</div> <div class="item">Item 3.2</div> <div class="item">Item 3.3</div> <div class="item">Item 3.4</div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>document.queryselector(".className") devuelve el primer elemento con la clase className