React 组件使用 JQuery 查找最后一个类型的类答案

【问题标题】：React component find last-of-type class with JQueryReact 组件使用 JQuery 查找最后一个类型的类
【发布时间】：2017-08-15 08:58:39
【问题描述】：

我有一个包含选定药物的手风琴。有 3 种类型（当前、规定和推荐）

我希望类型之间有 15 像素的下边距。

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

【问题讨论】：

标签： jquery css reactjs

【解决方案1】：

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

但是，如果您不想使您的 react 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');

【讨论】：

谢谢，你能解释一下如何或在哪里应用这个 JS。像这样在渲染内部？我在那里试过，但我得到了一个Cannot read property 'classList' of undefined
在componentDidMount()内

【解决方案2】：

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

【讨论】：

重点是我需要将此style 仅应用于每个类类型的最后一次出现。底部边距效果很好（我在上面的屏幕截图中手动完成了），但是获取代码来确定在哪里应用这种样式是我所追求的。还是谢谢。
你的意思是你不知道每种类型有多少元素？
不。选择药物并给出类型。这种类型有一个特定的类，您可以看到每种类型的颜色。但是为了区分类型，我只需要选择每种类型的最后一个类并应用边距。
你试过div :last-child 吗？
还没有，请详细说明。不确定它是否会起作用。因为所有条目都是兄弟姐妹。