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

【问题标题】：How to get span value for multiple of the same class name using jquery如何使用 jquery 获取多个相同类名的跨度值
【发布时间】：2019-11-28 02:53:26
【问题描述】：

当有多个相同的类名时，在 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>

【问题讨论】：

标签： javascript jquery html arrays

【解决方案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>

【讨论】：

谢谢@尼克
@HarishJGowda 不用担心 - 我很高兴能提供帮助。

【解决方案2】：

因为你已经有了var skil = $('.language-list .keyword-text'); 的元素列表，你可以像你已经在做的那样循环它，然后用skil[i].innerHTML 取出skil 中每个元素的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>

【讨论】：

谢谢杰克逊