Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   порядковый номер дочернего элемента (https://javascript.ru/forum/jquery/82837-poryadkovyjj-nomer-dochernego-ehlementa.html)

face2005 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 ?

Rise 14.07.2021 22:11
face2005, просто руками пропиши в html.

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

рони 14.07.2021 22:41
Цитата:
Сообщение от face2005
как вывести порядковый номер дочернего элемента...
прописать в css

Rise 15.07.2021 02:07
face2005, .text(function)
$('.namList').text(function(index) { return index + 1 });

face2005 15.07.2021 03:26
Цитата:
Сообщение от Rise (Сообщение 538670)
face2005, .text(function)
$('.namList').text(function(index) { return index + 1 });
спасибо!
я вот так сделал 
$('.itemCompany').each(function (index) { 
  $(this).find('.namList').text(index + 1);
});

рони 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>


Часовой пояс GMT +3, время: 13:17.