$('.classname').each(...) 的纯 JavaScript 等价物是什么？ [复制]答案

【问题标题】：What is the pure javascript equivalent for $('.classname').each(...)? [duplicate]$('.classname').each(...) 的纯 JavaScript 等价物是什么？ [复制]
【发布时间】：2020-05-01 18:54:12
【问题描述】：

我正在尝试创建一个类似于学校评分程序的表格。作为作业的一部分，我们不允许使用 jQuery。我找到了我想要的确切的 jQuery 函数，但我不知道如何将它转换为纯 javascript。除了 $('.grade').each(...) 部分之外，我几乎可以弄清楚所有内容。

HTML

<input id="week1" class="grade" name="week1" type="number">
<input id="week2" class="grade" name="week2" type="number">
<input id="week3" class="grade" name="week3" type="number">

<button id="display">Display</button>

<p id="results"></p>

原始的jQuery

$("#display").click(function() {
     var student_grade = new Array();
     $('.grade').each(function() {
          student_grade.push( $(this).val() );
     })
     var filtered = student_grade.filter(function(el) { return el; });
     $('#results').html(filtered);
});

我的转换尝试

 document.getElementById("display").onclick = function() {
     var student_grade = new Array();

      //here's where I need help converting to JavaScript
     $('.grade').each(function() {
         student_grade.push(this.value );
     })

     var filtered = student_grade.filter(function(el) { return el; });

     document.getElementById('results').innerHTML = filtered;
 };

【问题讨论】：

复制：Javascript native equivalent to JQuery .each() & $(this)
我不相信只是给出一个家庭作业的答案，但你可能会觉得developer.mozilla.org/en-US/docs/Web/API/Document/…很有趣......

标签： javascript jquery arrays foreach

【解决方案1】：

你可以试试querySelectorAll()

Document 方法querySelectorAll() 返回一个静态（非实时）NodeList，表示与指定选择器组匹配的文档元素列表。

和forEach()

forEach() 方法对每个数组元素执行一次提供的函数。

document.getElementById('display').addEventListener('click', function(){
  var student_grade = new Array();
  var gradeList = document.querySelectorAll('.grade');
  Array.from(gradeList).forEach(function(el) {
    student_grade.push(el.value);
  });
  var filtered = student_grade.filter(function(el) { return el; });
  document.getElementById('results').textContent = filtered;
});

<input id="week1" class="grade" name="week1" type="number">
<input id="week2" class="grade" name="week2" type="number">
<input id="week3" class="grade" name="week3" type="number">

<button id="display">Display</button>

<p id="results"></p>

【讨论】：

效果很好！正是我想要的。非常感谢！
@Matt，不客气:)

【解决方案2】：

 $('.grade').each(function() {
     student_grade.push(this.value );
 })

 document.querySelectorAll("input.grade").forEach(item => {
     student_grade.push(item.value);
 });

【讨论】：

【解决方案3】：

const student_grade = [...document.getElementsByClassName('grade')]

如果您不知道扩展运算符，... 您应该知道。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://www.gavsblog.com/blog/htmlcollection-foreach-loop-convert-object-to-array-javascript

【讨论】：

【解决方案4】：

这显示了$(".some-class").each() 是如何完成的：

document.querySelectorAll(".some-link").forEach((el, i) =>
  el.addEventListener("click", ev => console.log("clicked on", el.innerHTML, i))
);

.some-link {
  line-height: 1.25em;
  outline: 1px dotted orange
}

<div class="some-link">a</div>
<div class="some-link">b</div>
<div class="some-link">c</div>
<div class="some-link">d</div>
<div class="some-link">e</div>

使用for-of循环：

let arr = document.querySelectorAll(".some-link");

for (const el of arr) {
  el.addEventListener("click", ev => console.log("clicked on", el.innerHTML));
}

.some-link {
  line-height: 1.25em;
  outline: 1px dotted orange
}

<div class="some-link">a</div>
<div class="some-link">b</div>
<div class="some-link">c</div>
<div class="some-link">d</div>
<div class="some-link">e</div>

【讨论】：