Как получить элемент по порядковому номеру?

Question

[historydev]

Добрый день. Скажите пожалуйста как выбрать элемент из множества, допустим есть вот такие блоки:

<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
</div>

Как получить допустим 3-й элемент сверху? По классу и по имени тега, спасибо!

Answer 1

[lUser L]

div:nth-child(3) ?

https://codepen.io/5h4dy_s/pen/NWqByaE

Comments

[historydev]

пробовал, папитер не откликнулся, пустой масссив пришёл

[historydev]

по блоку оно откликнется разумеется, но там очень много блоков, не охота все перебирать, много времени забирает

[historydev]

На будущее, nth-child не берёт порядковый номер, он берёт каждый N элемент, то есть если вы пишите :nth-child(5) каждый 5 элемент будет красного цвета.

[Ankhena]

Владимир,

то есть если вы пишите :nth-child(5) каждый 5 элемент будет красного цвета.

на будущее :nth-child(5)
возьмет ТОЛЬКО 5ый элемент.

[historydev]

Ankhena, пардон, ошибся

Answer 2

[ediboba]

Если в css, то nth-child

Если в js, то document.querySelectorAll

Если в jquery, то .eq()

Comments

[historydev]

Указан js, меня интересуют больше классы, вот этот код выдаёт пустой массив

document.querySelectorAll('.company-item .company-item-info:nth-child(1)').forEach(el => {

                companyGroup.statuses.push(el.innerText);

            });

[ediboba]

Владимир,

let elements = document.querySelectorAll('.block:nth-child(1)');

for (let elem of elements) {
    elem.style.color = "red"
  }

[ediboba]

Владимир, у тебя скорее всего не работает, тк лишний пробел '.company-item.company-item-info:nth-child(1)'

[historydev]

ediboba, мне не нужна помощь новичка, ваши ответы не имеют не смысла, не логики.

[historydev]

ediboba, вы придумываете банальные, глупые ответы на ходу, которые гуглятся за 5 минут.

[historydev]

ediboba, на ты, мы не переходили.

[Ankhena]

Владимир,

вот этот код выдаёт пустой массив

Вероятно, потому что.company-item-info не является первым дочерним элементом своего родителя.

Проверить можете банальным css.

Иллюстрация https://jsfiddle.net/h5xcb4ey/