有什么方法可以将具有相同 css 值的多个 textContent 放入 JavaScript 中的变量中？

Question

我正在尝试找到一种方法来放置我从具有相同 CSS 的元素中提取的多个文本值，并将它们放入 javascript 中的数组中。 但我一直失败。我用谷歌搜索，但找不到我的问题的答案。

谁能告诉我我做错了什么并请指出？

这里是 HTML 部分。

<div>
    James
   <div>English : <span class="jtest">80</span> </div>
   <div>Japanese : <span class="jtest">60</span> </div>
   <div>Science : <span class="jtest">78</span> </div>
   <div>Art : <span class="jtest">85</span> </div>
   <div>Philosophy : <span class="jtest">45</span> </div>
   <div>Physical tranning : <span class="jtest">65</span> </div>
</div>
<br><Br>
 <div>
    Von
   <div>English : <span class="vtest">80</span> </div>
   <div>Japanese : <span class="vtest">85</span> </div>
   <div>Science : <span class="vtest">67</span> </div>
   <div>Art : <span class="vtest">64</span> </div>
   <div>Philosophy : <span class="vtest">97</span> </div>
   <div>Physical tranning : <span class="vtest">25</span> </div>
</div>
<br><Br>
 <div>
    Crack
   <div>English : <span class="ctest">80</span> </div>
   <div>Japanese : <span class="ctest">88</span> </div>
   <div>Science : <span class="ctest">40</span> </div>
   <div>Art : <span class="ctest">70</span> </div>
   <div>Philosophy : <span class="ctest">80</span> </div>
   <div>Physical tranning : <span class="ctest">69</span> </div>
</div>

这里是 javascript 部分。

<script>
var james = [''];
    james.push(document.getElementsByClassName("jtest"));
var Von = document.getElementsByClassName("vtest");
var Crack = document.getElementsByClassName("ctest");


console.log(james);
</script>

我想将具有 jtest 类的元素的 textContents 放入 james 变量中，例如 james ['80' , '60', '78', '85', '45', '65'];

Answer 1

使用document.querySelector 选择所有常见的classes 即（.jtest），然后使用for loop 将每个值推送到james 数组，

var james = [];
var jtest = document.querySelectorAll(".jtest");
for (var i = 0; i <= jtest.length - 1; i++) {
  james.push(jtest[i].textContent);
}
console.log(james);

<div>
  James
  <div>English : <span class="jtest">80</span> </div>
  <div>Japanese : <span class="jtest">60</span> </div>
  <div>Science : <span class="jtest">78</span> </div>
  <div>Art : <span class="jtest">85</span> </div>
  <div>Philosophy : <span class="jtest">45</span> </div>
  <div>Physical tranning : <span class="jtest">65</span> </div>
</div>
<br>
<Br>
<div>
  Von
  <div>English : <span class="vtest">80</span> </div>
  <div>Japanese : <span class="vtest">85</span> </div>
  <div>Science : <span class="vtest">67</span> </div>
  <div>Art : <span class="vtest">64</span> </div>
  <div>Philosophy : <span class="vtest">97</span> </div>
  <div>Physical tranning : <span class="vtest">25</span> </div>
</div>
<br>
<Br>
<div>
  Crack
  <div>English : <span class="ctest">80</span> </div>
  <div>Japanese : <span class="ctest">88</span> </div>
  <div>Science : <span class="ctest">40</span> </div>
  <div>Art : <span class="ctest">70</span> </div>
  <div>Philosophy : <span class="ctest">80</span> </div>
  <div>Physical tranning : <span class="ctest">69</span> </div>
</div>

Answer 2

数组声明应该像arrayName = [];，如果你初始化数组同时声明['']这意味着arrayName[0] = ''然后你将推入数组的任何数据，它开始存储索引 1 作为第 0 个索引已经具有 blank 值。

您可以使用属性 textContent 获取div 的所有数据。

$(document).ready(function() {
  debugger;
  var james = [];
  var elements = document.getElementsByClassName("jtest");
  for (var i = 0; i < elements.length; i++) {
    james.push(elements[i].textContent);
  }
  var Von = document.getElementsByClassName("vtest");
  var Crack = document.getElementsByClassName("ctest");


  console.log(james);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  James
  <div>English : <span class="jtest">80</span> </div>
  <div>Japanese : <span class="jtest">60</span> </div>
  <div>Science : <span class="jtest">78</span> </div>
  <div>Art : <span class="jtest">85</span> </div>
  <div>Philosophy : <span class="jtest">45</span> </div>
  <div>Physical tranning : <span class="jtest">65</span> </div>
</div>
<br>
<Br>
<div>
  Von
  <div>English : <span class="vtest">80</span> </div>
  <div>Japanese : <span class="vtest">85</span> </div>
  <div>Science : <span class="vtest">67</span> </div>
  <div>Art : <span class="vtest">64</span> </div>
  <div>Philosophy : <span class="vtest">97</span> </div>
  <div>Physical tranning : <span class="vtest">25</span> </div>
</div>
<br>
<Br>
<div>
  Crack
  <div>English : <span class="ctest">80</span> </div>
  <div>Japanese : <span class="ctest">88</span> </div>
  <div>Science : <span class="ctest">40</span> </div>
  <div>Art : <span class="ctest">70</span> </div>
  <div>Philosophy : <span class="ctest">80</span> </div>
  <div>Physical tranning : <span class="ctest">69</span> </div>
</div>

Answer 3

james = [];
Array.from(document.getElementsByClassName("jtest")).map(function(x){ james.push(x.textContent)});

console.log(james);

<div>
    James
   <div>English : <span class="jtest">80</span> </div>
   <div>Japanese : <span class="jtest">60</span> </div>
   <div>Science : <span class="jtest">78</span> </div>
   <div>Art : <span class="jtest">85</span> </div>
   <div>Philosophy : <span class="jtest">45</span> </div>
   <div>Physical tranning : <span class="jtest">65</span> </div>
</div>