Как назначить стиль в зависимости от кол-ва элементов в списке?
Есть список с элементами, нужно этому списку назначать разные стили в зависимости от кол-ва элементов в нем. Если один элемент, то будет 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, время: 18:57. |