Присвоить уникальный класс, очередность
Доброго времени суток!
Имею вот такую структуру кода:
<ul class="tabs">
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li
</ul>
Нужно скриптом добавить присвоить для каждого <li> свой уникальный класс, к примеру, что б получилось вот так:
<ul class="tabs">
<li class="i-tabs b-tabs-1">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs b-tabs-2">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs b-tabs-3">
<a href="#">my_title</a>
<div>my_text</div>
</li
</ul>
Подскажите как реализовать или в какую сторону копать!? Пытаюсь загуглить, а как правильно задать вопрос!? Спасибо! |
Цитата:
- Пройтись по элементам в цикле - Сформировать имя класса - Присвоить тот класс элементу |
Цитата:
в JavaScript не силен, так подправить под себя, но не написание с нуля. Спасибо. |
Цитата:
Начни хоть с этого http://learn.javascript.ru/ А в чем хоть силен-то? :) |
Цитата:
В чем силен, ммм ... могу придумать, нарисовать, сверстать, разбираюсь с MODx и т.д. я просто оставлю ссылку, но просьба не цитировать ее, ибо через пару часиков удалю ее _ п.с. надеюсь все же подскажете пример или запрос как реализовать. Спасибо п.с. как раз на "Наши услуги" и нужно сделать уникальный класс для каждого элемента |
RGBPlus,
а зачем вам уникальные классы? |
Цитата:
Можно конечно, не всем указывать класс, а только первому и последнему, но опять же не знаю как это написать на JavaScript п.с. в коде самого шаблона указать не могу, так как есть массивы с данными и для них один шаблон вывода, единственный путь скриптом присвоить класс принудительно. Спасибо. |
Цитата:
есть селекторы http://htmlbook.ru/css/first-child и http://htmlbook.ru/css/last-child |
Твою ж та дивизию (бью себя по лбу), как я мог про это забыть!? Наверное потому что не пользуешься этим. Привыкли на CMS опираться, что автоматом тебе даст first да last, CSS рулит!
п.с. вот же блин, ни когда не ищем легких путей! Всем спасибо за помощь! Ну и зелень в карму :) п.с.с. но закладку все же сделал http://learn.javascript.ru/ будем читать по мере свободного времени п.с. этого всего нет, скажем в .chm !? |
RGBPlus,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.tabs li{
float: left;
width: 100px;
border-bottom: #FF0000 2px solid;
border-top:#FF0000 2px solid;
list-style: none;
padding: 4px;
}
.tabs li:first-child{
border-left: #FF0000 2px solid;
border-radius: 8px 0 0 8px;
}
.tabs li:last-child{
border-right: #FF0000 2px solid;
border-radius:0 8px 8px 0;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
</ul>
</body>
</html>
|
| Часовой пояс GMT +3, время: 16:38. |