Форум

FredIkO · #1 (**permalink**) 22.12.2014, 20:54

Добрый вечер дорогие форумчане, подскажите пожалуйста каким образом можно организовать стили для каждой цифры в определенном 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>

Спасибо за уделенное время!

krutoy · #2 (**permalink**) 22.12.2014, 21:19

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

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

FredIkO · #3 (**permalink**) 22.12.2014, 22:03

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

почему у меня спан не в 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>');
    });
});

krutoy · #4 (**permalink**) 22.12.2014, 22:16

Сообщение от 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>

FredIkO · #5 (**permalink**) 22.12.2014, 22:18

krutoy,
спасибо тебе добрый человек)))

рони · #6 (**permalink**) 22.12.2014, 22:52

Сообщение от FredIkO

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

Сообщение от FredIkO

$(".proverka").text(function(index

FredIkO · #7 (**permalink**) 23.12.2014, 00:26

рони,
спасибо увидел

ruslan_mart · #8 (**permalink**) 23.12.2014, 07:38

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

рони · #9 (**permalink**) 23.12.2014, 08:00

Ruslan_xDD,
а g?

FredIkO · #10 (**permalink**) 19.01.2015, 15:19

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

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>

Форум

Справочник

Discord чат

Курсы javascript