React组件使用JQuery查找最后一个类

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

解

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那么无所谓。

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

Answer 2

使用padding-bottom代替margin-bottom并查看结果。