12

ネストされた div の背景色を交互に変えようとして、ちょっとした実験をしています。

これは私が達成しようとしているものです(インラインスタイルなし):

<div style="background: #fff;">
    <div style="background: #000;">
        <div style="background: #fff;">
            <div style="background: #000;">
                and so on...
            </div>
        </div>
    </div>
</div>

明らかな何かが欠けているに違いない気がします！試してみdiv:nth-of-type(2n)ましたが、これは 1 つのレベルにのみ適用されるようです。

これは、div が生成される実験用であるため、解決策は無限である必要があります (div div div div = white の行に沿ったものではありません)。純粋な CSS ソリューションを探すだけで、JavaScript を使用するのは非常に簡単です。

4

2 に答える 2

6

リスター氏が指摘したように、nth-of-type は 1 つのレベル (選択された div の親のレベル) で機能します。

私の知る限り、W3C CSS3 セレクターを調べたところ、ネストをトラバースするための css セレクターはないようです (親の直接の子のみを見る > セレクターを除く)。

それは非常に役立つ可能性があるので、間違っていることが証明されることを望みます.

したがって、唯一の（css）ソリューションは、すでに述べたものになります：div > div > div {background: white; } divの生成とともにこれを生成できませんか？

于 2012-04-07T15:10:41.497 に答える
4

他の人が述べたように、これは純粋な CSS では不可能です。ただし、js を使用すると、かなり可能であり、かなり簡単でもあります。

簡単にするためにこれを jQuery で実装しましたが、純粋な JS でも実行できます。

http://jsfiddle.net/sg3s/Suf3p/

私は基本的に、適用するセレクターをプライマリ カラーで色付けし、サブセレクトを使用して一致する子をセカンダリ カラーで色付けする小さな jQuery プラグインを作成しました。

jQuery(function($) {
    $.fn.alternateNestedBgColor = function(subselect, colors) {
        // While not a great optimization, length of the colors array always stays the same
        var l = colors.length;

        // Itterate over all element in possible array
        // jQuery best practice to handle initializing multiple elements at once
        return this.each(function() {
            var $sub = $(this), i = 0; 

            // Executes code, at least once
            do {

                // Set bg color for current $sub element
                $sub.css('backgroundColor', colors[i++ % l]);
                // Set $sub to direct children matching given selector
                $sub = $sub.children(subselect);

            // Will repeat the do section if the condition returns true
            } while ($sub.length > 0);
        });
    };

    // target first div in the body
    // first argument = child selector
    // second argument = array list of colors
    $('body>div').alternateNestedBgColor('div', ['red', 'green', 'blue', 'purple', 'grey']);
});

更新applyとがどのように使用されたかを詳述する更新が要求moduloされました。

これを最近投稿してから、ほぼ2年が経ちました。そして、作業中、当時私が作成したソリューションは少し冗長で混乱を招くものでしapplyた。スコープに少し慣れてきたので、関数をもっとシンプルに改訂しました。

が役立つ唯一の状況は、関数スコープ内applyの変数に値を渡す必要がある場合です。クラスを操作しない限り、 orthisが必要な状況はあまりありません。それについて読みたい場合は、クラスのコンテキストで説明しているこの回答を参照してください。MDN リンクも優れたリソースです (これおよびその他の JavaScript 構成要素/概念用)。applycall

に関してはmodulo、これは基本的な数学であり、この質問は操作を非常によく説明しています。つまり、数値を別の数値で割った後の完全な整数の余りが得られます。したがって、js のように33 % 8 = 1記述できますが、それは非常に非効率的です。33-parseInt(33/8)*8演算の結果は常に 0 (数値が完全に割り切れる場合) から 2 番目の引数から 1 を引いた値 (私の例では 7) になります。

0 % 3 = 0 // technically doesn't exist (as you can't divide 0 with anything) but 0 for practicality in all programming languages afaik(?)
1 % 3 = 1
2 % 3 = 2
3 % 3 = 0
4 % 3 = 1
5 % 3 = 2
6 % 3 = 0 etc...

これは、CPU にとって本質的に単純な操作の 1 つです。実際、これができなければ、コンピューターはありません。

JavaScript リビジョンでは、指定された配列からの色の選択を として記述しましたcolors[i++ % l]。

書くと、これは私に残りを与え、i / lその整数をcolors使用する色を返す配列のインデックスとして使用します。

は、モジュロで使用するため++に の値を返した後にのみ 1 を追加しますi。この動作は、私が書いた場合は逆になりますが++i、ここでの目的にはうまくいきません。

参考までに、 do...while に関する MDN の記事を参照してください。

いくつかの問題が解決したことを願っています！:)

于 2012-04-07T15:30:14.140 に答える