如何使用jquery获得多个相同类名的span值

Question

在存在多个相同类名的情况下，在for中使用循环来获取值

下面的代码试图使用span中的一个循环来获取JQuery元素的值。

我怎样才能返回:英语、印地语、ABCD、Laravel和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

因为您已经有了带有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>

​

Answer 2

您可以使用$.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>

​