Вопрос или проблема
Увеличьте число на один.
У меня есть множество DIV-ов с одинаковым классом. Мне нужно динамически применить z-index для каждого DIV. z-index: 1 должен быть для первого DIV, z-index: 2 для второго DIV и так далее, но почему-то мой скрипт не работает так, как ожидалось!
$(".siblingsDiv").each(function() {
for( var i=0; i<9; i++) {
$(this).css('z-index', i)
}
})
i<9 — это просто демонстрация для этого примера. Но на самом деле я не знаю, сколько DIV-ов будет, так что как мне поступить в этой части?
Пожалуйста, покажите мне, где я ошибаюсь. Спасибо
$(".siblingsDiv").each(function() {
for( var i=0; i<9; i++) {
$(this).css('z-index', i)
}
}).siblingsDiv {
background: yellow;
height: 50px;
margin-bottom: 20px
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>Проблема с вашим скриптом заключается в том, что вы используете цикл for внутри метода each. Это заставляет каждый элемент .siblingsDiv проходить 9 раз, перезаписывая значение z-index. Вместо этого вам следует использовать индекс, предоставленный методом .each(), чтобы динамически применить правильный z-index.
После исправления ваш код должен выглядеть так:
$(".siblingsDiv").each(function(index) {
$(this).css('z-index', index + 1); // индекс начинается с 0, поэтому добавляем 1
});
используйте метод .index(), чтобы достичь вашей цели.
Работающий фрагмент кода:
$(".siblingsDiv").each(function() {
$(this).css('z-index', $(this).index())
}).siblingsDiv {
background: yellow;
height: 50px;
margin-bottom: 20px
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="siblingsDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>.length`
.
Ответ или решение
Ваша задача состоит в том, чтобы динамически установить значения z-index для набора элементов div, у которых есть одинаковый класс. Ваша текущая реализация использует вложенный цикл for, что приводит к тому, что необходимо устанавливать z-index 9 раз для каждого div, на самом деле, вам нужно просто назначить уникальное значение z-index каждому элементу, исходя из его индекса в списке.
Правильный способ решения вашей задачи заключается в использовании метода .each(), который уже предоставляет индекс для каждого div. Индекс начинается с нуля, поэтому вам нужно будет добавлять 1, чтобы z-index начинался с 1.
Ваш исправленный код должен выглядеть следующим образом:
$(".siblingsDiv").each(function(index) {
$(this).css('z-index', index + 1); // index начинается с 0, поэтому мы прибавляем 1
});Таким образом, если у вас есть, например, пять элементов с классом siblingsDiv, то их z-index будет устанавливаться следующим образом:
- Для первого
divбудетz-index: 1 - Для второго
divбудетz-index: 2 - Для третьего
divбудетz-index: 3 - И так далее.
Вот полный пример вашего кода с обновленной логикой:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример Z-индекса</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.siblingsDiv {
background: yellow;
height: 50px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="siblingsDiv">Элемент 1</div>
<div class="siblingsDiv">Элемент 2</div>
<div class="siblingsDiv">Элемент 3</div>
<div class="siblingsDiv">Элемент 4</div>
<div class="siblingsDiv">Элемент 5</div>
<script>
$(".siblingsDiv").each(function(index) {
$(this).css('z-index', index + 1); // index начинается с 0, поэтому мы прибавляем 1
});
</script>
</body>
</html>Данный код будет работать корректно и устанавливать z-index для каждого элемента, начиная с 1 и увеличивая на 1 для каждого следующего элемента. Таким образом, вы достигнете вашей цели, динамически присваивая значения z-index всем элементам с классом siblingsDiv.