Добавить классов к несколько элементов подряд
Всем привет! Есть два вопроса:
1. Как добавить классов к несколько элементов подряд через переменную, к примеру: Что то подобное:
var count = 2;
$('.list .item').eq(count).addClass('new-class');
Должно получится так, но это не работает как мне надо! <div class="list"> <div class="item new-class"></div> <div class="item new-class"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 2. Как добавить z-index как в примере ниже (блоков может быть разное количество)? <div class="list"> <!-- и т.д выше --> <div class="item" style="z-index: 50;></div> <div class="item" style="z-index: 40;></div> <div class="item" style="z-index: 30;></div> <div class="item" style="z-index: 20;></div> <div class="item" style="z-index: 10;></div> </div> Спасибо! |
ethereal,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.item{
height: 25px;
background-color: #FF0000;
}
.item.new-class{
background-color: #7B68EE;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
var count = 2;
//$(`.list .item:lt(${count})`).addClass('new-class');
var items = $(`.list .item`);
items
.each((i, el) => el.style.zIndex = `${(items.length - i) * 10}`)
.slice(0, count).addClass('new-class');
});
</script>
</head>
<body>
<div class="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 04:59. |