Read more

Get the last leaf of a DOM tree (while considering text nodes)

Henning Koch
May 19, 2014Software engineer at makandra GmbH

I use this to simulate the (non-existing) :last-letter CSS pseudoclass, e. g. to insert a tombstone Show archive.org snapshot at the end of an article:

findLastLeaf = ($container) ->
  $children = $container.children()
  if $children.length == 0
    $container
  else
    $lastChild = $children.last()
    $lastContent = $container.contents().filter(->
      # Only return nodes that are either elements or non-empty text nodes
      @nodeType == 1 || (@nodeType == 3 && _.strip(@nodeValue) != '')
    ).last()
    if $lastContent.get(0) == $lastChild.get(0)
      findLastLeaf($lastChild)
    else
      $container
Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

Please note that you can't simply say $container.descendants.last() or something similar, since jQuery is ignorant of text nodes.

Posted by Henning Koch to makandra dev (2014-05-19 16:23)