Как назначить стиль в зависимости от кол-ва элементов в списке?
Есть список с элементами, нужно этому списку назначать разные стили в зависимости от кол-ва элементов в нем. Если один элемент, то будет class="area size1", если два — class="area size2" и т. д. Хочется сделать этот код компактным и желательно поместить внутрь тега списка. Как это сделать?
<ul class="area" onload="???"> <li></li> ... <li></li> </ul> |
<style> ul.size-2 { color:blue; } ul.size-3 { color:red; } </style> <ul class="area"> <li>dsds</li> <li>dsds</li> ... <li>sdds</li> </ul> <ul class="area"> <li>dsds</li> ... <li>sdds</li> </ul> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $("ul.area").each(function() { var a="size-" + $(this).find('li').length; $(this).removeClass(a).addClass(a) }); }); </script> |
Работает, но слишком далеко от тега. По сути, мне нужно эмулировать CSS-селектор, который назначает разные стили в зависимости от количества элементов в контейнере. Поэтому логика должна быть как можно ближе к тегу. Может быть есть другие события помимо onload, которые подойдут?
|
Shitbox2,
Цитата:
Достаточно одного на странице, ставите в удобное место Переместил |
Хм... А может быть и есть логика. Поместить на страницу кусок кода, отвечающего непосредственно за оформление. И что-то вроде такого написать
<ul class="area" data-addCountElemsClass="size"> <li>dsds</li> ... <li>sdds</li> </ul>Своего рода расширение CSS |
Часовой пояс GMT +3, время: 08:30. |