4

由于悲惨的情况，我收到了这样的 HTML：

<p>Perform the following commands:
   <code>&gt; cd /foo</code><code>&gt; adb shell</code><code># ps</code>
</p>

我需要让代码看起来像这样：

Perform the following commands:
> cd /foo
> adb shell
# ps

我以为我会很棘手并使用CSS Adjacent Sibling Selector：

code + code:before { content:'\A'; white-space:pre }

...但后来我发现这甚至适用于以下内容：

<p>If you go to your <code>C:\</code> directory and run <code>dir</code> …&lt;/p>

是否有一个仅 CSS 的解决方案来选择相邻元素而不干预非元素节点？

当且仅当没有时，请随意提出 JavaScript（包括 jQuery）解决方案。

4

2 回答 2

4

这有效：

$('code').each(function() {
    var prev = this.previousSibling;
    var next = this.nextSibling;
    if ((prev && prev.tagName === 'CODE') ||
        (next && next.tagName === 'CODE')) {
        $(this).addClass('block');
    }
});​

然后在您的 CSS 中使用.block选择器向匹配的元素添加display: block任何其他所需的样式。

演示在http://jsfiddle.net/alnitak/JYzGg/

如果您还没有加载 jQuery，那么将其编码为纯 Javascript 将非常容易 - 如果您应该在这些元素上已经有其他类名，那么 jQuery 恰好使添加类比纯 JS 更容易。

于 2012-06-25T22:18:13.887 回答
1

虽然我看到您已经接受了答案，但我想我会提供这个作为替代方案：

$('code').each(
    function(){
        if (this.previousSibling == this.previousElementSibling){
            $(this).addClass('block');
        }
        else {
            $(this).addClass('inline');
        }
    });​

JS 小提琴演示。

当然，这只会在那些实现的浏览器上运行previousElementSibling（但我认为大多数实现 CSS 伪元素的浏览器都实现了这个功能）。

而且，在纯原生 JavaScript 中：

var codes = document.getElementsByTagName('code');

for (var i=0, len=codes.length; i<len; i++){
    var cur = codes[i];
    codes[i].className = cur.previousSibling == cur.previousElementSibling ? 'block' : 'inline';
}​

JS 小提琴演示。

而且因为我更喜欢一种稍微整洁的方法来添加类（而不是在我添加的新类之前显式添加空格字符），所以也有这种方法：

function addClass(elem,newClass){
    if (!elem) {
        return false;
    }
    else {
        var curClass = elem.className;
        if (curClass.length){
            return curClass + ' ' + newClass;
        }
        else {
            return newClass;
        }
    }
}

var codes = document.getElementsByTagName('code');

for (var i=0, len=codes.length; i<len; i++){
    var cur = codes[i];
    codes[i].className = cur.previousSibling == cur.previousElementSibling ? addClass(cur,'block') : addClass(cur,'inline');
}​

JS 小提琴演示。

针对 Alnitak 提出的评论进行了编辑（当我去给自己泡一杯茶时，我意识到了第二个，第一个我根本没有考虑过）：

var codes = document.getElementsByTagName('code');

for (var i=0, len=codes.length; i<len; i++){
    var cur = codes[i];
    codes[i].className = cur.previousSibling == codes[i-1] || cur.nextSibling == codes[i+1]? addClass(cur,'block') : addClass(cur,'inline');
}​

JS 小提琴演示

参考：

于 2012-06-25T22:39:42.630 回答