Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.12.2014, 20:54
Аспирант
Отправить личное сообщение для FredIkO Посмотреть профиль Найти все сообщения от FredIkO
 
Регистрация: 19.04.2013
Сообщений: 53

Каждой цифре свой стиль?
Добрый вечер дорогие форумчане, подскажите пожалуйста каким образом можно организовать стили для каждой цифры в определенном div'е

То есть имеется сплошной текст в котором встречаются (года)

Пример:
Дед по отцу Лев Александрович — артиллерии полковник, гвардии капитан. Отец — Сергей Львович Пушкин (<div class="data">1767</div>—<div class="data">1848</div>), светский острослов и поэт-любитель. Мать Пушкина — Надежда Осиповна (<div class="data">1775</div>—<div class="data">1836</div>), внучка Ганнибала.


Хочу сделать чтобы у даты у каждого символа были стили


Как бы реализовать что бы например все что в div'e data каждый символ автоматически заносился в <span>
Например:
<div class="data"><span>1</span><span>7</span><span>6</span><span>7</span></div>


Спасибо за уделенное время!
Ответить с цитированием
  #2 (permalink)  
Старый 22.12.2014, 21:19
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

Смотря какие стили, где их будете брать для каждого свой? Вручную классы создавать? Тогда уж проще вбить вручную инлайн. Если только цвета, то можно так
<html>
  <head>
  </head>

  <body>
<div>
Дед по отцу Лев Александрович — артиллерии полковник, гвардии капитан. Отец — Сергей Львович Пушкин (<div class="data">1767</div>—<div class="data">1848</div>), светский острослов и поэт-любитель. Мать Пушкина — Надежда Осиповна (<div class="data">1775</div>—<div class="data">1836</div>), внучка Ганнибала.
</div>
<script>
d=document.querySelector("div")
gen=function(){
  var gen=function(){return Math.floor(Math.random()*9)}
  return "#"+gen()+gen()+gen()+gen()+gen()+gen()
}
d.innerHTML=d.innerHTML.replace(/\d/g, function(year){return "<span style='font-size: "+gen().slice(-2)+"; color: "+gen()+"'>"+year+"</span>"})


</script>
</body>
</html>

Последний раз редактировалось krutoy, 22.12.2014 в 21:46.
Ответить с цитированием
  #3 (permalink)  
Старый 22.12.2014, 22:03
Аспирант
Отправить личное сообщение для FredIkO Посмотреть профиль Найти все сообщения от FredIkO
 
Регистрация: 19.04.2013
Сообщений: 53

Решил пойти другим путем
что я делаю не так?

почему у меня спан не в html а как текст отображатеся

<div class="proverka">
1234.
</div>


$(document).ready(function(){
    $(".proverka").text(function(index, html) {
        return html.replace('1', '<span>1</span>').replace('2', '<span>2</span>');
    });
});
Ответить с цитированием
  #4 (permalink)  
Старый 22.12.2014, 22:16
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

Сообщение от FredIkO
почему у меня спан не в html а как текст отображатеся
Хз, я жеквери не знаю. Думаю, ты хотел вот это
<html>
  <head>
  </head>

  <body>

<div class="proverka">
1234.
</div>

<script>
d=document.querySelector(".proverka")
text=d.innerHTML
text=text.replace("1", "<span>1</span>")
text=text.replace("2", "<span>2</span>")
d.innerHTML=text
</script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 22.12.2014, 22:18
Аспирант
Отправить личное сообщение для FredIkO Посмотреть профиль Найти все сообщения от FredIkO
 
Регистрация: 19.04.2013
Сообщений: 53

krutoy,
спасибо тебе добрый человек)))
Ответить с цитированием
  #6 (permalink)  
Старый 22.12.2014, 22:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,051

Сообщение от FredIkO
почему у меня спан не в html а как текст

Сообщение от FredIkO
$(".proverka").text(function(index
Ответить с цитированием
  #7 (permalink)  
Старый 23.12.2014, 00:26
Аспирант
Отправить личное сообщение для FredIkO Посмотреть профиль Найти все сообщения от FredIkO
 
Регистрация: 19.04.2013
Сообщений: 53

рони,
спасибо увидел
Ответить с цитированием
  #8 (permalink)  
Старый 23.12.2014, 07:38
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

$(function(){
    $(".proverka").html(function(index, html) {
        return html.replace(/\d/g, '<span>$1</span>');
    });
});

Последний раз редактировалось ruslan_mart, 23.12.2014 в 12:51.
Ответить с цитированием
  #9 (permalink)  
Старый 23.12.2014, 08:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,051

Ruslan_xDD,
а g?
Ответить с цитированием
  #10 (permalink)  
Старый 19.01.2015, 15:19
Аспирант
Отправить личное сообщение для FredIkO Посмотреть профиль Найти все сообщения от FredIkO
 
Регистрация: 19.04.2013
Сообщений: 53

столкнулся с проблемой

d=document.querySelector(".stata-sr")
text=d.innerHTML
text=text.replace("1", "<span>1</span>")
text=text.replace("2", "<span>2</span>")
text=text.replace("3", "<span>3</span>")
text=text.replace("4", "<span>4</span>")
text=text.replace("5", "<span>5</span>")
text=text.replace("6", "<span>6</span>")
text=text.replace("7", "<span>7</span>")
text=text.replace("8", "<span>8</span>")
text=text.replace("9", "<span>9</span>")
text=text.replace("0", "<span>0</span>")
d.innerHTML=text


если цифра повторяется то js его не обрабатывает почему как исправить?



в html получается так

<div class="left stata-sr"><span>1</span><span>3</span>3</div>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Каждой странице вызвать свой скрипт samgreenchik Общие вопросы Javascript 3 08.09.2014 14:38
Как объединить 4 одинаковых функции Batyabest Общие вопросы Javascript 2 21.12.2013 21:53
Не меняется стиль блока lokifc Events/DOM/Window 2 10.11.2012 00:39
Свой стиль для CheckBox vah-smile Элементы интерфейса 7 23.06.2011 18:34
ссылки получали стиль "visited" только на время сессии alexandr_poskrobka Серверные языки и технологии 7 10.03.2010 08:48