Find the Nth span that is a direct child of a div

Each new div will start a new set of span children.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div>
  <span class="aClass">a - tier 1</span> <br/><!-- found by :nth-of-type(1) -->
  <span class="aClass">b - tier 1</span> <br/><!-- found by:nth-of-type(2) -->
  <div>
    <span class="aClass" >a - tier 2</span> <br/><!-- found by :nth-of-type(1) -->
    <span class="aClass" >b - tier 2</span> <br/><!-- found by :nth-of-type(2) -->
    <span class="aClass" >c - tier 2</span> <br/><!-- found by :nth-of-type(3) -->
    <div>
      <span class="aClass" >a - tier 3</span><br/><!-- found by :nth-of-type(1) -->
      <span class="aClass" >b - tier 3</span><br/><!-- found by :nth-of-type(2) -->
    </div>
    <span class="aClass" >d - tier 2</span> <br/>
    <div>
      <span class="aClass" >a - tier 3</span><br/><!-- found by :nth-of-type(1) -->
      <span class="aClass" >b - tier 3</span><br/><!-- found by :nth-of-type(2) -->
    </div>
  </div>
  <span class="aClass">c - tier 1</span> <br/>
  <span class="aClass">d - tier 1</span> <br/>
</div>

JavaScript

$(document).ready(function(){
  var nTh = 4;  // change this to whichever N you wish
  var rowsOfSpans = new Array();
  var divsWithChildren = $("div:parent");
  for(var i = 0; i < divsWithChildren.length; i++){
  	rowsOfSpans[i] = $(divsWithChildren[i]).children("span.aClass");
  }
  
  for(var i = 0; i < rowsOfSpans.length; i ++){
  	for(var j =0; j < rowsOfSpans[i].length; j++){
    	if(j == nTh-1){
        // THIS IS THE NTH ELEMENT
      	$(rowsOfSpans[i][j]).html($(rowsOfSpans[i][j]).html() + " : found the " + nTh + "th element").css("background-color", "blue").css("color","white");
      }
    }
  }
 
  
});