如何 select 多个块的每个第一项 (html, javascript)
How to select every first items of multiple blocks (html, javascript)
我正在尝试 select 一系列多个块中的每个第一项,但我不知道该怎么做 :(
这是我尝试过的一个例子:
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>
谢谢你帮助我!
你可以这样做
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>
使用 :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")
returns 第一个元素 class className
我正在尝试 select 一系列多个块中的每个第一项,但我不知道该怎么做 :(
这是我尝试过的一个例子:
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>
谢谢你帮助我!
你可以这样做
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>
使用 :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")
returns 第一个元素 class className