jQuery each-loop access every index text element

Question

I have the below snippet.

If you run the snippet you are able to see that the output is correct but I need to store each span's text element in a variable to process further. If possible I would prefer a solution without a recursive function.

 $(document).ready(function () { $('li').click(function (e) { let fo; let foo; let fooo; $(e.currentTarget).children('span').each(function() { console.log($(this).text()); // Expected Output // fo = li1(2) +span1 // foo = li1(2) +span2 // fooo = li1(2) +span3 }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul> <li> <span style="display: block;">li1 + span1</span> <span style="display: block;">li1 + span2</span> <span style="display: block;">li1 + span3</span> </li> <li> <span style="display: block;">li2 + span1</span> <span style="display: block;">li2 + span2</span> <span style="display: block;">li3 + span3</span> </li> </ul> </div> 

Answer 1

To achieve what you require you could build an array of all the span texts by using map() . This method has the advantage of being dynamic enough to work for any number of child elements.

Once you've built the array you can either loop over it to work with all values, or select a specific instance by its index. Try this:

 $(document).ready(function() { $('li').click(function(e) { var textValues = $(this).children('span').map(function() { return $(this).text(); }).get(); console.log(textValues[1]); // the second item console.log(textValues); // all }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul> <li> <span style="display: block;">li1 + span1</span> <span style="display: block;">li1 + span2</span> <span style="display: block;">li1 + span3</span> </li> <li> <span style="display: block;">li2 + span1</span> <span style="display: block;">li2 + span2</span> <span style="display: block;">li3 + span3</span> </li> </ul> </div> 

Answer 2

If you already have 3 variables, then why not simply take nth-child 3 times using eq selector

 $(document).ready(function () { $('li').click(function (e) { let fo = $(this).find("span:eq(0)").html(); let foo = $(this).find("span:eq(1)").html(); let fooo = $(this).find("span:eq(2)").html(); console.log(fo, foo, fooo); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul> <li> <span style="display: block;">li1 + span1</span> <span style="display: block;">li1 + span2</span> <span style="display: block;">li1 + span3</span> </li> <li> <span style="display: block;">li2 + span1</span> <span style="display: block;">li2 + span2</span> <span style="display: block;">li3 + span3</span> </li> </ul> </div>