JSFiddle - React, Tailwind, and code Playground

HTML

<!-- want to be able to get each span and its text -->
<ul class="nav">
  <li><a href="#"><span>Menu Item</span></a></li> 
  <li><a href="#"><span>Menu Item</span></a></li>
  <li><a href="#"><span>Menu Item</span></a></li>
</ul>

<!-- want to be able to get each a and its text -->
<ul class="nav">
  <li><a href="#">Menu Item</a></li> 
  <li><a href="#">Menu Item</a></li>
  <li><a href="#">Menu Item</a></li>
</ul>

<!-- want to be able to get each a and its text -->
<div class="nav">
  <div><a href="#">Menu Item</a></div> 
  <div><a href="#">Menu Item</a></div>
  <div><a href="#">Menu Item</a></div>
</div>

<!-- want to be able to get each a and its text -->
<div class="nav">
  <a href="#">Menu Item</a>
  <a href="#">Menu Item</a>
  <a href="#">Menu Item</a>
</div>

JavaScript

$('.nav').each(function(){
    console.log('Nav '+$(this).index());
    $(this).children().each(function(){
        var $d = $(this);
        while($d.children().length==1){
            $d = $($d.children()[0]);
        }
        console.log($d.text());
        console.log($d);
        console.log('');
    });
});