javascript - 为未标记的文本添加样式

Question

我有无法更改的 html（因为它来自客户端数据库），如下所示。如您所见，它没有包含在标签中，并且我无法选择 div，因为我只想使用 white-space:pre-line; 定位 sub_header（如果存在）下的内容；

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

这甚至可能吗？

Answer 1

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

That code should apply the CSS to the parent div (which I assumed has a class of container but change it to whatever) but not the child span. There are more elegant ways to do it (get inner content, exclude the span, then wrap it in another div styled as you need) but this will do in a jiffy assuming they are all in this format.

Answer 2

looking for something like this? 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>

Answer 3

这是一个 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然后我用正确的样式包装它。