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隣接兄弟セレクターを使用すると思いました：

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によって提起されたコメントに応えて編集されました（私が自分でお茶を作るために行ったときに私が気付いた2番目、最初はまったく考えていませんでした）：

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 に答える