Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.04.2014, 10:10
Аватар для RGBPlus
Аспирант
Отправить личное сообщение для RGBPlus Посмотреть профиль Найти все сообщения от RGBPlus
 
Регистрация: 10.02.2014
Сообщений: 34

Присвоить уникальный класс, очередность
Доброго времени суток!

Имею вот такую структуру кода:

<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>


Подскажите как реализовать или в какую сторону копать!? Пытаюсь загуглить, а как правильно задать вопрос!?

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2014, 10:23
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,163

Сообщение от RGBPlus
как реализовать или в какую сторону копать!?
Сторона тут одна...
- Пройтись по элементам в цикле
- Сформировать имя класса
- Присвоить тот класс элементу
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2014, 10:34
Аватар для RGBPlus
Аспирант
Отправить личное сообщение для RGBPlus Посмотреть профиль Найти все сообщения от RGBPlus
 
Регистрация: 10.02.2014
Сообщений: 34

Сообщение от ksa
Сторона тут одна...
- Пройтись по элементам в цикле
- Сформировать имя класса
- Присвоить тот класс элементу
Это я примерно понимаю, в смысле задачу, не понимаю выполнение, т.е. как это реализовать!? Можно пример кода или как правильно задать запрос в гугле, что б примеры реализации посмотреть, ну а дальше под себя подстроить.

в JavaScript не силен, так подправить под себя, но не написание с нуля. Спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2014, 10:42
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,163

Сообщение от RGBPlus
в JavaScript не силен
Тогда гуглить бестолку...
Начни хоть с этого
http://learn.javascript.ru/

А в чем хоть силен-то?
Ответить с цитированием
  #5 (permalink)  
Старый 02.04.2014, 11:06
Аватар для RGBPlus
Аспирант
Отправить личное сообщение для RGBPlus Посмотреть профиль Найти все сообщения от RGBPlus
 
Регистрация: 10.02.2014
Сообщений: 34

Сообщение от ksa Посмотреть сообщение
Тогда гуглить бестолку...
Начни хоть с этого
http://learn.javascript.ru/

А в чем хоть силен-то?
Я понимаю Ваше стремление показать/научить/что б разобрался сам, безусловно это интересно/нужно/полезно/обязательно, я вернусь к этому списку и прочту все, но на данный момент нужно сделать.

В чем силен, ммм ... могу придумать, нарисовать, сверстать, разбираюсь с MODx и т.д. я просто оставлю ссылку, но просьба не цитировать ее, ибо через пару часиков удалю ее _

п.с. надеюсь все же подскажете пример или запрос как реализовать. Спасибо
п.с. как раз на "Наши услуги" и нужно сделать уникальный класс для каждого элемента

Последний раз редактировалось RGBPlus, 02.04.2014 в 11:51.
Ответить с цитированием
  #6 (permalink)  
Старый 02.04.2014, 11:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

RGBPlus,
а зачем вам уникальные классы?
Ответить с цитированием
  #7 (permalink)  
Старый 02.04.2014, 11:38
Аватар для RGBPlus
Аспирант
Отправить личное сообщение для RGBPlus Посмотреть профиль Найти все сообщения от RGBPlus
 
Регистрация: 10.02.2014
Сообщений: 34

Сообщение от рони Посмотреть сообщение
RGBPlus,
а зачем вам уникальные классы?
у меня по дизайну идут скругленные углы (как верхнее меню) у первого и последнего переключателя вкладок, ну и последнего нет border-right: 1px solid #fff; как это реализовать без дополнительного класса не знаю.

Можно конечно, не всем указывать класс, а только первому и последнему, но опять же не знаю как это написать на JavaScript

п.с. в коде самого шаблона указать не могу, так как есть массивы с данными и для них один шаблон вывода, единственный путь скриптом присвоить класс принудительно.

Спасибо.
Ответить с цитированием
  #8 (permalink)  
Старый 02.04.2014, 11:43
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,163

Сообщение от RGBPlus
Можно конечно, не всем указывать класс, а только первому и последнему, но опять же не знаю как это написать на JavaScript
Для этого скрипт не нужен...
есть селекторы
http://htmlbook.ru/css/first-child
и
http://htmlbook.ru/css/last-child
Ответить с цитированием
  #9 (permalink)  
Старый 02.04.2014, 11:50
Аватар для RGBPlus
Аспирант
Отправить личное сообщение для RGBPlus Посмотреть профиль Найти все сообщения от RGBPlus
 
Регистрация: 10.02.2014
Сообщений: 34

Твою ж та дивизию (бью себя по лбу), как я мог про это забыть!? Наверное потому что не пользуешься этим. Привыкли на CMS опираться, что автоматом тебе даст first да last, CSS рулит!

п.с. вот же блин, ни когда не ищем легких путей!

Всем спасибо за помощь! Ну и зелень в карму

п.с.с. но закладку все же сделал http://learn.javascript.ru/ будем читать по мере свободного времени п.с. этого всего нет, скажем в .chm !?

Последний раз редактировалось RGBPlus, 02.04.2014 в 11:54.
Ответить с цитированием
  #10 (permalink)  
Старый 02.04.2014, 11:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как удалить класс у соседних элементов housewm Events/DOM/Window 4 11.03.2014 13:29
Как присвоить класс элементу после проверки cookies Round jQuery 20 17.10.2013 09:47
Передал аяксом класс в <div>, но как отловить событите клик на этот класс ? saturn Элементы интерфейса 11 31.05.2012 10:30
Присвоить каждому td в tr свой класс majahead jQuery 4 08.12.2010 12:30
Jquery немогу установить класс! shureg Общие вопросы Javascript 4 26.10.2010 14:37