What is the equivalent of jQuery's $(".cell:first") in D3?

d3.js, dom, javascript, jquery

Solution

`d3.select(".cell")` already selects the first matched element:

Selects the first element that matches the specified selector string, returning a single-element selection. If no elements in the current document match the specified selector, returns the empty selection. If multiple elements match the selector, only the first matching element (in document traversal order) will be selected.

Source: https://github.com/mbostock/d3/wiki/Selections#wiki-d3_select

"How would I get the last item?"

D3 appears to return the results of `d3.selectAll()` in a collection, positioned in an array. For instance, requesting all paragraphs on the d3 homepage results in:

[ Array[32] ] // An array with a single array child. Child has 32 paragraphs.

So if we wanted to get the last paragraph from that collection, we could do the following:

var paragraphs = d3.selectAll("p");
var lastParag  = paragraphs[0].pop();

Or more concisely:

var obj = d3.select( d3.selectAll("p")[0].pop() );

"What about :last-child?"

The `:last-child` selector isn't the same as getting the last element on a page. This selector will give you the elements that are the last child of their parent container. Consider the following markup:

<div id="foo">
  <p>Hello</p>
  <p>World</p>
  <div>English</div>
</div>
<div id="bar">
  <p>Oie</p>
  <p>Mundo</p>
  <div>Portuguese</div>
</div>

In this example, running `d3.select("p:last-child")` won't return any of your paragraphs. Even `d3.selectAll("p:last-child")` won't. Neither of those containers have a last child that is a paragraph (they are `<div>` elements: `<div>English</div>` and `<div>Portuguese</div>`).

Problem

Original source