Question

d3.select('.activity:last')和d3.selectAll('.activity:last')均失败。与此同时; $('.activity:last')有效。

d3.selectAll('.activity:last')
  .append('<div class="hook-table">Table comes here</div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
  <div class="activity"></div>
  <div class="activity"></div>
  <div class="activity"></div>
  <div class="activity"></div>
  <div class="activity"></div>
</div>

是否有D3方式传递:last选择器。

Answer 1

:last不是有效的CSS选择器。它可与jQuery一起使用，因为jquery添加了对此选择器的支持：

：last是jQuery扩展，不属于CSS规范（docs）

由于D3仅考虑有效的CSS选择器字符串，因此:last将不适用于D3。

相反，您将需要更多代码才能获取最后一个元素。

如果您的div是其兄弟姐妹的最后一个，则可以使用:last-child：

d3.select(".container").select(".activity:last-child")
  .text("5: This div selected");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>


<div class="container">
  <div class="activity"><p>1</p></div>
  <div class="activity"><p>2</p></div>
  <div class="activity"><p>3</p></div>
  <div class="activity"><p>4</p></div>
  <div class="activity"><p>5</p></div>
</div>

但是，如果您在最后一个div以下还有另一个元素，则此方法将无效。上面将选择类别为“活动”的div，它是.container的最后一个孩子（请参阅MDN）。

对于更复杂的结构，其中最后一个“活动”类的div或元素不是最后一个同级，则需要采用更复杂的方法。

D3js：“：last不是有效的选择器”？

1 个答案: