jquery - React 组件使用 JQuery 查找 last-of-type 类

Question

我有一个 Accordion，里面装有选定的药物。 有 3 种类型 (Current, Prescribed and Recommended)

我希望类型之间的底部边距为 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;
}

解决方案

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

您可以计算哪个元素是 react 中的 last-of-type 并将适当的类放在那里 .last-of-type

但是如果你不想让你的 react 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');