Блог

Главная - Вопросы по программированию - Подсчет элементов li — > Затем применение CSS = проблема с загрузкой

Подсчет элементов li — > Затем применение CSS = проблема с загрузкой

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я работаю с CMS. Чтобы отобразить некоторое содержимое списка, мне нужно подсчитать количество элементов списка, чтобы равномерно распределить их по странице. Я выполнил эту функцию:

 $(document).ready(function() {
$("button").click(function() { 

    var count = $("#page_menu ul li").length;
    var breit = 945 / count;
    $("#page_menu li").css("width", breit);   
})
}) 
       #page_menu ul {
       margin: 0px;
       top: 0px;
       }

#page_menu li {
     border: 1px solid #fff;
     margin: 0 -1px 0 0;
     display: flex;
     justify-content: center;
     text-align: center;
     align-items: center;
     }


   #page_menu ul li {
     height: 50px;
     float: left;
     list-style: none;
     font-size: 13px;
     } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page_menu">

<ul class="nav menu mod-list">
  <li class="item-121"><a href="/index.php/about/feintaeschner" >Feintäschner</a></li><li class="item-122"><a href="/index.php/about/querfloete" >Querflöte</a></li><li class="item-123"><a href="/index.php/about/illustrator" >Illustrator</a></li><li class="item-124"><a href="/index.php/about/autor" >Autor</a></li></ul>

</div>

<button>change</button>

Это делает именно то, что должно делать — СЛИШКОМ ПОЗДНО!

Если быть точным: страница загружается и создает список. После этого javascript выполняет свою функцию подсчета и передает ее в CSS. Однако к тому времени CSS, относящийся к списку, больше не получает информацию. Кнопка остается пустой и без функции, независимо от того, была ли она размещена перед разделом javascript или после. И так будет до тех пор, пока я не перейду на уровень ниже в подменю с тем же меню. Тогда все работает нормально.

И другое дело, что я хотел бы загрузить его сам по себе, а не с помощью нажатия кнопки. Как я могу этого добиться?

Извините, я не занимался подобными вещами последние 10 лет. Я полностью потерян.

Комментарии:

1. Чтобы ваша ширина учитывалась при загрузке страницы, вам просто нужно ввести код $(document).ready . И главный вопрос все еще не ясен.

2. Большое вам спасибо. Проблема решена. Не видел леса, потому что он был полон деревьев. 😉