Присвоить уникальный класс, очередность
Доброго времени суток!
Имею вот такую структуру кода:
<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>
|
рони,
Спасибо с CSS уже разберусь, тут проблем нет :), ksa спустил на землю и напомнил об истоках! Спасибо ребят, вопрос закрыт! |
var items = document.getElementsByClassName('i-tabs');
for (i=0;i<items.length;i++){
items[i].classList.add('b-tabs-'+(i+1));
}
|
Цитата:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>
<script>
var items = document.getElementsByClassName('i-tabs');
for (i=0;i<items.length;i++){
items[i].classList.add('b-tabs-'+(i+1));
}
</script>
</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>
не отрабатывает скрипт |
Цитата:
|
Цитата:
|
RGBPlus,
window.onload — полностью загрузилась страница со всеми ресурсами. http://learn.javascript.ru/onload-onerror#window-onload |
Скрипты выполняются сразу же после загрузки. Вот у тебя тег <script> уже загрузился, скрипт уже отрабатывается, а остальные элемента еще не загружены. Надо либо писать скрипт после элементов, с которыми идет работа, либо сделать так:
window.onload = function()
{
var items = document.getElementsByClassName('i-tabs');
for (i=0;i<items.length;i++){
items[i].classList.add('b-tabs-'+(i+1));
}
}
Первое лучше, потому-что второй вариант сработает только после полной загрузки страницы, включая картинки. |
Спасибо за пояснения! Сохранил, пример в архивчик, подписал, уложил на полку.
|
| Часовой пояс GMT +3, время: 00:21. |