jquery - jQuery を使用した縦書きテキスト

Question

<br />jQueryで文字間にタグを追加して、テキストを縦に揃えようとしています。

<div id="foo"><label>Vertical Text</label></div> 

次のようになります。

縦
書き
テキスト
_
_
_
_
_

_
_
_
_

Answer 1

ゴルフに行こう！

$('#foo label').html($('#foo label').text().replace(/(.)/g,"$1<br />"));

完全にテストされていませんが、正規表現のパターンはおっぱいのように見えます.

Answer 2

Kurt 氏の回答は単一の ID でうまく機能しますが、複数の要素に適用できるより便利なものが必要な場合は、次のようにしてください。

$.each( $(".verticalText"), function () { $(this).html($(this).text().replace(/(.)/g, "$1<br />")) } );

次にclass="verticalText"、このようにフォーマットしたい要素を設定するだけです。

おまけとして、おっぱいの正規表現を保持します。

Answer 3

document.write("vertical text".split("").join("<br/>"));

追記：ホールインワン！

Answer 4

テストされていませんが、動作するはずです。

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

Answer 5

これは Sebastian H's answer に基づいていますが、テストしたところ、これは機能します

    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++;
    }

Answer 6

jQuery の組み込みの each メソッドを使用できるのに、なぜ while ループを使用するのでしょうか。

$.each( $('#foo').text(), function(){ $('#foo').append(this + '
'); } );

そこには。できます。テストできます。