分享
三行代码  ›  专栏  ›  技术社区  ›  Matt

$('.classname').each(…)的纯javascript等价物是什么?

  •  1
  • Matt  · 技术社区  · 4 天前

    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;
     };
    
    4 回复  |  直到 4 天前
        1
  •  3
  •   Mamun    4 天前

    你可以试试 querySelectorAll()

    文件法 querySelectorAll() 节点列表 表示与指定的选择器组匹配的文档元素的列表。

    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;
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <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>
        2
  •  0
  •   Ahmet Zeybek    4 天前
     $('.grade').each(function() {
         student_grade.push(this.value );
     })
    

     document.querySelectorAll("input.grade").forEach(item => {
         student_grade.push(item.value);
     });
    
        4
  •  0
  •   nopole    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>

    用于循环:

    let arr = document.querySelectorAll(".some-link");
    
    for (const el of arr) {
      el.addEventListener("click", ev => console.log("clicked on", el.innerHTML));
    }
    .一些链接{
    线高:1.25em;
    轮廓:1px橙色点
    <div class=“some link”>一个<div>
    <div class=“some link”>b</div>
    <div class=“some link”>部分链接</div>