Как посчитать li в ul и применить индивидуальный css - с помощью JavaScript?

Рейтинг: 1Ответов: 2Опубликовано: 17.12.2014

Здравствуйте! Подскажите пожалуйста! Есть 3 альбома-меню ul и на каждом (в качестве обложки) всегда различное количество изображений от 1 до 4

Если одно изображение в блоке то width:100% т.е. полностью 400х400
Если два то 50% - нужно чтоб картинки автоматически подогнались под 400х400
Если три то 30% - в общем размер блока фиксированный а картинки сами должны вмещаться и не оставлять пустых мест

Как составить js который посчитает кол-во li в class-е и в зависимости от кол-ва сработает нужный css width:% и картинки полностью заполнят ul блок

<style>
ul{
    width:400px;
    height:400px;
}
</style>
<body>
<ul class="block">
    <li class="img"></li>
</ul>
<ul class="block">
    <li class="img"></li>
    <li class="img"></li>
</ul>
<ul class="block">
    <li class="img"></li>
    <li class="img"></li>
    <li class="img"></li>
</ul>
</body>
css javascript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

http://jsfiddle.net/mj43rxLj/1/

var i,j,amount,items,lists = document.getElementsByTagName('ul');//Ищем все списки
for(i=0;i<lists.length; i++){
    items = lists[i].getElementsByTagName('li');//Ищем все li внутри ul
    amount = items.length;
    lists[i].className += ' amountBasedClass'+amount;//Присваиваем UL нужный класс
}

Классы сами придумайте. Я привел для примера как я понял вашу задачу.

▲ 1

Можно обойтись и без javascript:

/* один элемент */
li:first-child:nth-last-child(1) {
    width: 100%;
}

/* два элемента */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* три элемента */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* четыре элемента */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

Статья оригинал: Styling elements based on sibling count