Question: In jQuery, how would I descend as far as possible into the HTML tree?

For simplicity, I only have one path going downward. 

(related but bonus: how do I find the deepest element with multiple downward paths?)

```
<html>  
  <table id="table0">  
    <tr>  
      <td id="cell0">  
        <div class"simple">  I want to change this information </div>  
      </td>
    </tr>  
  </table>  
</html>

```

I want to change the innermost HTML of the cell named **cell0** but I don't necessarily know the names of all the classes inside. Is it possible to select this far without knowing these names?

Thanks much!

Answer: 
This question has a simple and good answer when for jQuery. However, I was looking for an elegant solution without it. Since `:has` is not supported in any browser yet, I came up with this one here.

```
Array.from( document.querySelectorAll( 'body *' ) )
  .filter( e => !e.children.length );

```
Well, starting from a basis that you have no idea where this "deepest" node is, you could do something like this:

```
$.fn.deepest = function() {
  var depth = 0;
  this.find('*').each(function() {
    var d = $(this).parents().length;
    depth = Math.max(d, depth);
  });
  return this.find('*').filter(function() {
    return this.parents().length === depth;
  });
});

```

Then

```
var $deepest = $('body').deepest();

```

would (excepting the 12 bugs probably in my code) would be a jQuery object for the set of deepest elements.

*edit* — one of my dozen bugs is that this doesn't take into account the depth of the starting node(s) - that'd be a trick to figure out. Might be better to refactor it so that it finds the deepest of the originally-selected list:

```
$.fn.betterDeepest = function() {
  var depth = 0;
  this.each(function() {
    depth = Math.max(depth, $(this).parents().length);
  });
  return this.filter(function() { return $(this).parents().length === depth; });
});

```

and to get the deepest on the page you'd do:

```
var deepest = $('*').betterDeepest();

```