Get values of multiple elements simultaneously and use them separately

Question

I am trying to get all values of first 5 elements with same class separately but at the same time. If the input is:

<span><div class="amount large">100</div></span>
<span><div class="amount large">120</div></span>
<span><div class="amount large">300</div></span>
<span><div class="amount small">90</div></span>
<span><div class="amount large">110</div></span>
<span><div class="amount large">520</div></span>
... List goes on

I want to get all those values separately, but simultaneously. Then I want to use them to make sth like this: Large numbers in a row are 3. I have tried using this

$( ".amount" ).slice(0, 5).text();

and even tried

$( ".amount" ).slice(0, 5).each(function() {
$(this).html() or .text() or .val()
}

The output in the 1st one would be 100120300 with no separator and the other one would be full html code.

Is there any way to also count how many items there are in series without interruption. In my case, 3. I tried

 $("span .large ~ span .large").length 

but no result

Answer 1

You should read the docs before looking for something so trivial: each()

In your case:

var values = [];

$(".amount").each(function(index){
    values.push($(this).text());
});

console.log(values.slice(0,5));

If you only want the first 5 items, just slice the array.

As for your second question, it's a different subject, so create a new question please.