要素：first-child force reevaluate

私は".hidden"クラスを持ち、リアルタイムでDOM要素を構築します。だから私はのような簡単なコードを取得する：要素：first-child force reevaluate

... 
    <div class="hidden">1</div> 
    <div class="hidden">2</div> 
    <div class="hidden">3</div> 
...

私のCSSの定義は、単純な以上のものです：

.hidden { 
display: none; 
} 

.hidden:first-child { 
display: block; 
}

すべてが良い、誰もが幸せです。今私が$('.hidden:first-child').remove()のようなものを削除すると、次の要素は表示されません。デベロッパーコンソールでDOMノードをクリックしたときに表示されるようです（ctrl + shift + i in chrome）。

ブラウザがCSSルールを評価するように強制する方法はありますか？

更新これはjsFiddle test caseです。ボタンをクリックすると「0」が表示され、別の番号はなく、「1」、「2」などとなります。

結論： 不思議なことに、私は削除する前にフェードアウト（400）を取り外しただし場合は（）それは動作します。

出典

2012-04-12 lukas.pukenis

あなたは、テストケースを再現することはできますか？ DOMが変わるたびに、ブラウザはすでにCSSを再評価しているはずです。 – BoltClock

@Sven Bieder： 'first-child'はその内容ではなく要素を見ているので、それは重要ではありません。最初の '.hidden'要素はまだ最初の子です（これらのすべての要素がクラスを持っていると仮定します）。これを削除すると、2番目の要素が最初の要素になります。 – BoltClock

http://jsfiddle.net/umt3q/はうまく動作します – jAndy

CSS疑似クラスを使用してみてください：最初の型-の代わりに：第一子

ここjsFiddleの実施例である：http://jsfiddle.net/jukDU/3/

出典

2012-04-12 13:59:19 gabitzish

地獄はい、これは動作します！ありがとう！ –

なぜか：first-of-typeは動作しますが、Chromeでは '：first-child'ではありませんが、もう一つのバグでなければなりません。 – BoltClock

@ BoltClockのユニコーン私は本当にこれがバグではないと確信しています。しかし、再検査されたjsFiddleは最初の子と一緒に私のために働きません。私の人生を通して最初の子供は今まで私を失敗させませんでした:) –

私は次のアイテムを最初に表示してから削除します。

$('.hidden:first-child').next().show(); 
$('.hidden:first-child').remove();

出典

2012-04-12 13:56:45

しかし、ニースの答えは、少し不自然に思われる –

要素：first-child force reevaluate

答えて

関連する問題