Вертикальный текст с jQuery
Я хочу вертикально выровнять текст, добавив теги <br /> между символами с помощью jQuery.
<div id = "foo"><label>Vertical Text</label></div>
будет выглядеть так:
V
e
r
t
i
c
a
l
T
e
x
t
Ответы 6
Не проверял, но работать должно.
var element = $( '#foo label' );
var newData = '';
var data = element.text();
var length = data.length;
var i = 0;
while( i < length )
{
newData += data.charAt( i ) + '<br />';
i++;
}
element.html( newData );
Эта последняя строка должна быть: element.html (newData);
Верно. Это лучше, чем мой ответ.
Это основано на ответе Себастьяна Х, но я тестировал его, и это работает
var element = $( '#foo label' );
var newData = '';
var data = element.text();
var length = data.length;
var i = 0;
$( '#foo label' ).html("");
while( i < length )
{
$( '#foo label' ).append(data.charAt( i ) + "<br />")
i++;
}
Если у меня больше одного, он, кажется, добавляется к обоим, таким образом удваивая текст. Есть идеи?
Пойдем поиграть в гольф!
$('#foo label').html($('#foo label').text().replace(/(.)/g,"$1<br />"));
Полностью непроверено, но шаблон в регулярном выражении выглядит как болвана.
Зачем использовать цикл while, если вы можете использовать jQuery, встроенный в каждый метод?
$.each(
$('#foo').text(), function(){
$('#foo').append(this + '
');
}
);
Там. Оно работает. Вы можете это проверить.
Ответ г-на Курта хорошо работает для одного идентификатора, но если вам нужно что-то более полезное, которое можно применить к нескольким элементам, попробуйте что-то вроде этого:
$.each( $(".verticalText"), function () { $(this).html($(this).text().replace(/(.)/g, "$1<br />")) } );
Затем просто установите class = "verticalText" на элементы, которые вы хотите отформатировать следующим образом.
И в качестве бонуса он сохраняет регулярное выражение boob.
document.write("vertical text".split("").join("<br/>"));
Редактировать: Отверстие в одном!
V <br /> e <br /> r <br /> t <br /> i <br /> c <br /> a <br /> l <br /> <br /> T <br /> e <br /> x <br /> t <br /> вот что это значит.