How to get span value for multiple of the same class name using jquery

Question

Get span value using for loop in JQuery when there are multiple of the same class names

I have the code below to try and get the value of the span elements using a loop in JQuery.

How would I be able to return: English, Hindi, ABCD, Laravel and Kannada.

 $(() => { var skil = $('.language-list .keyword-text'); alert(skil.length); var skills = new Array(); for(var i=0;i<skil.length;i++){ skills.push($(this).$('skil')[i]); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row p-3 mb-4 keywords-list language-list"> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">English</span> </span> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">Hindi</span> </span> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">ABCD</span> </span> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">Laravel</span> </span> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">kannada</span> </span> </div>

Answer 1

You can use $.each to iterate over each of the spans:

 var skil = $('.language-list .keyword-text'); var skills = new Array(); skil.each(function(i) { skills.push($(this).text()); }); console.log(skills);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row p-3 mb-4 keywords-list language-list"> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">English</span> </span> <span class="keyword"><span class="keyword-remove " ></span><span class="keyword-text b p-2 text-black">Hindi</span></span> <span class="keyword"><span class="keyword-remove " ></span><span class="keyword-text b p-2 text-black">ABCD</span></span> <span class="keyword"><span class="keyword-remove " ></span><span class="keyword-text b p-2 text-black">Laravel</span></span> <span class="keyword"><span class="keyword-remove " ></span><span class="keyword-text b p-2 text-black">kannada</span></span> </div>

Answer 2

Because you already have got the list of elements with var skil = $('.language-list .keyword-text'); you can loop over it like you already are doing and grab out the innerHTML of each element in skil with skil[i].innerHTML .

See below:

 $(() => { var skil = $('.language-list .keyword-text'); alert(skil.length); var skills = new Array(); for(var i=0;i<skil.length;i++){ skills.push(skil[i].innerHTML); } console.log(skills); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row p-3 mb-4 keywords-list language-list"> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">English</span> </span> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">Hindi</span> </span> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">ABCD</span> </span> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">Laravel</span> </span> <span class="keyword"> <span class="keyword-remove " ></span> <span class="keyword-text b p-2 text-black">kannada</span> </span> </div>