如何使用jquery获取多个相同类名的跨度值

Question

当有多个相同的类名时，在 JQuery 中使用for循环获取跨度值

我有下面的代码来尝试使用 JQuery 中的循环获取span元素的值。

我将如何返回：英语、印地语、ABCD、Laravel 和卡纳达语。

 $(() => { 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

您可以使用$.each迭代每个跨度：

 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

因为你已经得到了元素var skil = $('.language-list .keyword-text'); 你可以通过它循环像你已经在做，并抢出innerHTML中每个元素的skil与skil[i].innerHTML 。

见下文：

 $(() => { 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>