0

以下のような（クライアントデータベースからのものであるため）変更できないhtmlがあります。ご覧のとおり、タグでラップされておらず、div を選択できません。これは、sub_header (存在する場合) の下にあるものだけを white-space:pre-line; でターゲットにしたいためです。

<span class="sub_header">Example:</span>
<br/>
Some text
That I need to wrap with white-space:pre-line;
As it displays on one line in html
all the way done to the div
</div>

これは可能ですか？

4

3 に答える 3

2 
$('div.container').css('white-space', 'pre-line');
$('div.container span.sub_header').css('white-space', 'normal');

そのコードは、CSS を親 div に適用する必要があります (これにはクラスがあると仮定しましたが、containerそれを何にでも変更します) が、子スパンには適用されません。それを行うためのよりエレガントな方法があります (内部コンテンツを取得し、を除外しspan、必要に応じて別の div スタイルでラップします)、すべてがこの形式であると仮定すると、これは簡単に実行できます。

于 2013-07-19T18:33:10.167 に答える
0

このようなものをお探しですか？http://jsfiddle.net/pKyG7/4/

<div>
    <span class="sub_header">Example:</span><br/>
<div style="font:arial; font-size:26px; white-space:pre-line;">Some text
That I need to wrap with white-space:pre-line;
As it displays on one line in html
    all the way done to the div.</div>
</div>
于 2013-07-19T18:33:18.600 に答える
0

jQuery ソリューションは次のとおりです: http://jsfiddle.net/9PzeS/

$($('.sub_header + br')[0].nextSibling).wrap('<span style="white-space:pre-line"></span>');

理想的でエラー処理が必要かどうかはわかりませんが、うまくいくようです。

編集 - 少し読みやすいバージョン:

var textNode = $('.sub_header + br')[0].nextSibling;
$(textNode).wrap('<span style="white-space:pre-line"></span>');

$('.sub_header + br')[0]例でタグを選択しbr、dom ノードを取得します。nextSiblingテキストノードを含む次の兄弟を選択するバニラ js プロパティです。

span次に、それを正しいスタイルの でラップします。

于 2013-07-19T18:39:56.300 に答える