陣營最後的型組件發現類與jQuery

我有包含選擇藥物的手風琴。有3種類型（電流，訂明和推薦）陣營最後的型組件發現類與jQuery

我想有類型之間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組件中做類似的事情。

這是林之後。

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; 
}

來源

2017-08-15 morne

你可以指望哪個元素是最後的類型的反應，把有適當的類.last-of-type

但是，如果你不想複雜的反應javascript代碼外部JavaScript或jQuery代碼也不是一個壞理念。我會推薦vanila JS，因爲速度很快，但是如果你已經在使用jQuery，那麼這並不重要。

Vanila 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');

來源

2017-08-15 09:21:20 Melounek

謝謝，你能解釋一下如何或在哪裏應用這個JS。渲染裏面就是這樣嗎？我在那裏嘗試過，但是我得到''無法讀取'componentDidMount（）'內的undefined' – morne

屬性'classList' – Melounek

令人驚歎的，謝天謝地。使用JQuery解決方案。 – morne

使用padding-bottom代替margin-bottom和看到的結果。

來源

2017-08-15 09:06:03 Umesh

的一點是，我需要這個'style'僅適用於每個類類型的最後一次出現。保證金底的偉大工程（我沒有在上面手動的截圖），但得到的代碼，以確定在何處應用這種風格是什麼後，IM。不管怎麼說，還是要謝謝你。 – morne

你的意思是你不會知道每種類型有多少元素？ – Umesh

nope。選擇藥物並給予一種類型。這種類型有一個特定的類，你可以看到每種類型的顏色。但要在類型之間分開，我只需要選擇每種類型的最後一個類並應用邊距。 – morne

陣營最後的型組件發現類與jQuery

回答

相關問題