如何選擇多個塊的每個第一項（html，javascript）-有解無憂

我正在嘗試選擇一系列多個塊中的每個第一項，但我不知道該怎么做:(

這是我嘗試過的一個例子：

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>

謝謝你幫助我！

uj5u.com熱心網友回復：

你可以做這樣的事情

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>

uj5u.com熱心網友回復：

使用: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>

uj5u.com熱心網友回復：

document.queryselector(".className")回傳具有類 className 的第一個元素

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/466694.html

標籤：javascript html 数组选择器-api

上一篇：將（n）個鍵從物件陣列中分離到一個帶有鍵名的陣列中

下一篇：在.map中添加父div