Форум

face2005 · #1 (**permalink**) 14.07.2021, 22:10

Приветствую! Подскажите как вывести порядковый номер дочернего элемента...

<div class="innerCompany">
    <div class="itemCompany">
          <div class="namList"></div>
          Название 1
    </div>     
        <div class="itemCompany">
          <div class="namList"></div>
          Название 2
    </div> 
        <div class="itemCompany">
          <div class="namList"></div>
          Название 3
    </div> 
</div>

при клике я могу его получить

$(".itemCompany").click(function(){
    var num_active = $(".itemCompany").index(this) + 1;
    console.log(num_active );
});

а как сразу при загрузке занести эти номера в блок с классом namList ?

face2005 · #2 (**permalink**) 14.07.2021, 22:22

хотелось бы как-то автоматизировать...

рони · #3 (**permalink**) 14.07.2021, 22:41

Сообщение от face2005

как вывести порядковый номер дочернего элемента...

прописать в css

face2005 · #4 (**permalink**) 15.07.2021, 03:26

Сообщение от Rise

face2005, .text(function)

$('.namList').text(function(index) { return index + 1 });

спасибо!
я вот так сделал

$('.itemCompany').each(function (index) { 
  $(this).find('.namList').text(index + 1);
});

рони · #5 (**permalink**) 15.07.2021, 07:58

Сообщение от face2005

я вот так сделал

чем вариант с css не устроил? )))

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
     .innerCompany{
         counter-reset: num 0;
     }
     .namList:before{
         counter-increment: num;
         content:  counter(num);
     }

    </style>
  </head>

<body>
<div class="innerCompany">
        <div class="itemCompany">
                    <div class="namList"></div>
                    Название 1
        </div>
                <div class="itemCompany">
                    <div class="namList"></div>
                    Название 2
        </div>
                <div class="itemCompany">
                    <div class="namList"></div>
                    Название 3
        </div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript