ReactコンポーネントがJQueryでlast-of-typeクラスを見つけた

Question

私は選択された投薬を含むアコーデオンを持っています。 3種類あります（現在、既定、推奨）

タイプ間に15pxの下マージンが必要です。

私はそれらをクラスpanel-head-color1,panel-head-color2およびpanel-head-color3で識別させました。これは色々な種類の色分けをしました。

しかし間隔で、私は、各クラスの最後の要素はmargin-bottom:15px

アイブ氏は

、CSSに

div.panel-head-color1:last-of-type, 
div.panel-head-color2:last-of-type, 
div.panel-head-color3:last-of-type{ 
    margin-bottom: 15px !important; 
} 

をのようなものを試してみましたしかし、それは動作しません持っていると思います。私はJQueryを考えていますが、Reactコンポーネントでどのようにするかはわかりません。

これは私の後です。

CURRENT CSS

.panel-head-color1 > .panel-heading{ 
    background-color: #5cb85c; 
    color: #ffffff; 
} 

.panel-head-color2 > .panel-heading{ 
    background-color: #f0ad4e; 
    color: #222222; 
} 

.panel-head-color3 > .panel-heading{ 
    background-color: #5bc0de; 
    color: #222222; 
} 

.panel-head-color1, 
.panel-head-color2, 
.panel-head-color3{ 
    margin-top: 0 !important; 
} 


.last-of-type { 
    margin-bottom: 15px !important; 
} 

SOLUTION

componentDidMount: function() { 
    $('.panel-head-color1').last().addClass('last-of-type'); 
    $('.panel-head-color2').last().addClass('last-of-type'); 
    $('.panel-head-color3').last().addClass('last-of-type'); 
}, 

CSS

.last-of-type { 
    margin-bottom: 15px !important; 
} 

Answer 1

あなたは反応に最後の型である要素カウントし、適切なクラスにあり.last-of-type

を置くしかし、あなたはあなたのjavascriptのコードを反応させ、外部JavaScriptやjQueryのコードを複雑にしたくない場合も悪いわけではないことができますアイディア。速度のためにvanila JSをお勧めしますが、すでにjQueryを使用している場合は問題ではありません。

バニラJS：

var elements = document.getElementsByClassName('panel-head-color2'); 
elements[elements.length-1].classList.add('last-of-type'); 

のjQuery：

$('.panel-head-color2').last().addClass('last-of-type'); 

Answer 2

margin-bottomの代わりにpadding-bottomを使用して、結果を確認してください。