如何使用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>