Форум

ethereal · #1 (**permalink**) 14.02.2021, 22:51

Всем привет! Есть два вопроса:

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>

Спасибо!

рони · #2 (**permalink**) 14.02.2021, 23:50

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>

Форум

Справочник

Discord чат

Курсы javascript