Нужно через vanilla js реализовать обратный отсчет свойств z-index

Question

Нужно через js реализовать обратный отсчет свойства z-index

<div class="wrap">
    <div class="item">Some text</div>
    <div class="item">Some text</div>
    <div class="item">Some text</div>
    <div class="item">Some text</div>
</div>

Должно получиться так

<div class="wrap">
    <div class="item" style="z-index: 4;">Some text</div>
    <div class="item" style="z-index: 3;">Some text</div>
    <div class="item" style="z-index: 2;">Some text</div>
    <div class="item" style="z-index: 1;">Some text</div>
</div>

Пробовал через reverse() возвразает ошибку

Answer 1

На самом деле способов достаточно много, но это первый который пришел мне в голову.

let items = document.querySelectorAll(".item");
let length = items.length;

items.forEach(el => {
    el.style.zIndex = length;
    length--;
})

<div class="wrap">
    <div class="item">Some text</div>
    <div class="item">Some text</div>
    <div class="item">Some text</div>
    <div class="item">Some text</div>
</div>

БЛОГ НА HUSL

Нужно через vanilla js реализовать обратный отсчет свойств z-index

Ответы (1 шт):