Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2021, 21:51
Аспирант
Отправить личное сообщение для ethereal Посмотреть профиль Найти все сообщения от ethereal
 
Регистрация: 06.05.2019
Сообщений: 77

Добавить классов к несколько элементов подряд
Всем привет! Есть два вопроса:

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, 22:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,173

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как создать в цикле несколько дочерних элементов одного уровня? DimonCry Общие вопросы Javascript 11 13.01.2011 09:46
hover - несколько элементов как один megapup Events/DOM/Window 3 28.10.2010 19:06
Как обрамить несколько элементов в ul Alexxx jQuery 21 31.05.2010 14:17
Измерения и прозрачность элементов BAnder Events/DOM/Window 13 03.02.2009 13:25
Как обработать несколько элементов подряд? vladymyrk jQuery 1 07.01.2009 19:33