$('.classname').each(...) 的纯 JavaScript 等价物是啥？ [复制]

Posted 2023-05-09

【中文标题】$(\'.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/…很有趣......

【参考方案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>