javascript - How to loop through the children of a div nested three levels down -

i have structure looks this,

$('#container').children().each(function() {          var child = $(this).first();          child.children().each(function() {              console.log($(this).text() + '\nthis should appear after each selectme.text()');          });      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id='container'>          <div class='firstrows'>              <div class='childoffirstrow'>                  <div class='selectme'>                      first set of data                  </div>                  <div class='selectme'>                      second set of data                  </div>                  <div class='selectme'>                      third set of data                  </div>                  <div class='selectme'>                      fourth set of data                  </div>              </div>          </div>          <div class='firstrows'>              <!-- same data inside me -->          </div>          <div class='firstrows'>              <!-- same data inside me -->          </div>          <div class='firstrows'>               <!-- same data inside me -->          </div>      </div>

this have do.

1. loop through firstrows inside container
2. for every row inside container, go 1 element down tochildoffirstrow
3. for every selectme inside of childoffirstrow, change data.

what i'm having trouble selecting selectme. reason if try out,

$('#container').children().each(function() {     $(this).first().children().each(function() {         console.log($(this).text());     }); }); 

this bring children @ once. i'm doing $(.childoffirstrow).text();

how text() of selectme's 1 @ time, instead of @ once?

you're looking children of children in container div:

$('#container').children().each(function() {     $(this).first().children().children().each(function() {         console.log($(this).text());     }); }); 

js fiddle demo