Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.08.2021, 11:47
Кандидат Javascript-наук
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 113

Присвоить стиль каждому последующему элементу
Приветствую гуру JS! К вам небольшой вопрос..
Имею:
<div id="mi-slider" class="mi-slider"><ul>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
            <li><a href="#"><img src="#"></a></li>
          </ul></div>


Таких Групп UL может быть любое количество, а в них моет быть любое количество LI..

Мне необходимо в каждой группе UL задать стиль для каждого LI, что бы в каждой группе UL у каждого LI был z-index на 1 меньше предыдущего, а left и top увеличивался на 50

Делаю вот так:

<script type="text/javascript">
  $('.mi-slider  ul li').each(function(i, el) {
$(function() { $(el).css('z-index', "99" - i); }, i );
$(function() { $(el).css('left',  i * 50); }, i );
$(function() { $(el).css('top',  i * 50); }, i );
});
</script>


Но у меня для абсолютно всех LI в блоке .mi-slider меняется значение...
т.е. я получаю:

<div id="mi-slider" class="mi-slider"><ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li style="z-index: 96; left: 150px; top: 150px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 95; left: 200px; top: 200px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 94; left: 250px; top: 250px;"><a href="#"><img src="#"></a></li>
          </ul>
          </div>
и т.д.

А нужно:


<div id="mi-slider" class="mi-slider"><ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
          <ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
<ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
<ul>
            <li style="z-index: 99; left: 0px; top: 0px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 98; left: 50px; top: 50px;"><a href="#"><img src="#"></a></li>
            <li style="z-index: 97; left: 100px; top: 100px;"><a href="#"><img src="#"></a></li>
          </ul>
          </div>
и т.д.

Подскажите плиз, как решить задачу?
Ответить с цитированием
  #2 (permalink)  
Старый 18.08.2021, 12:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

firsmember,
$(function() {
            $('.mi-slider  ul').each(function(i, ul) {
                $('li', ul).each(function(i, li) {
                    $(li).css({
                        'z-index': 99 - i,
                        'left': i * 50,
                        'top': i * 50
                    })
                })
            });
        });
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как присвоить каждому элементу списка различную задержку анимации? imhateb Events/DOM/Window 3 07.08.2017 09:22
как программно присвоить id элементу <div> jeel Events/DOM/Window 10 07.06.2014 15:21
Присвоить каждому диву в гриде значение определенного времени Semandra Общие вопросы Javascript 0 26.02.2013 17:45
Присвоить элементу стиль с атрибутом media="print" через javascript x3zone Events/DOM/Window 1 19.10.2012 09:37
Как поменять стиль последнему элементу списка UL ARLEVNAR Элементы интерфейса 6 15.07.2010 09:58