javascript - 有什么方法可以将具有相同 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>