将 jQuery each() 循环重新设计为 Vanilla JS

Posted 2023-05-09

【中文标题】将 jQuery each() 循环重新设计为 Vanilla JS

【英文标题】：Refashion a jQuery each() loop to Vanilla JS

【发布时间】：2018-07-13 05:02:03

【问题描述】：

我正在尝试将 jQuery each() 函数转换为 vanilla javascript，而且我快到了，但我似乎无法找到一种将同一元素的多个实例存储在要添加的变量中的方法到我的数组，然后用替换each() 的for loop 进行迭代。

我遇到的问题是获取“arr”数组中的元素来表示元素的每个实例。

** 请注意，我已将原始简化的 each() 循环注释掉，但如果您取消注释，您将看到会发生什么。

Codepen：https://codepen.io/emilychews/pen/aqdWzp

JS

// // ----------  EACH LOOP ON TEXT ELEMENTS

// $('div, h1').each(function()
//         var myElement = this;
//         myElement.style.cssText = "background: red; transition: 1s"
// );


// // ----------  VANILLA JS

var div = document.getElementsByTagName("div")[0];
var h1 = document.getElementsByTagName("h1")[0];

var arr = [div, h1];

for (i = 0; i < arr.length; i++) 

  var myElement = arr[i];
  arr[i] = this;

  myElement.style.cssText = "background: red; transition: 1s"

CSS

body display: flex; margin: 20px; padding: 0; flex-direction: column; align-items: center; justify-content: center;

div 
  width: 200px;
  height: 100px;
  background: blue;


h1 
  color: white;
  background: blue;
  width: 200px;

html

<div></div>
<div></div>
<h1>a heading</h1>

【问题讨论】：

那行有什么用？ arr[i] = this;

为什么[0] 在document.getElementsByTagName("...")[0] 中？

您可能正在寻找document.querySelectorAll("div, h1")

@LioraHaydont 我需要引用“this”，因为元素将自动触发 scrollMagic 函数。

@Andreas [0] 是为了阻止它在我解释问题时抛出错误。

【参考方案1】：

问题是因为您正在创建元素的二维数组，而不是包含所有元素的单个扁平数组（这更类似于保存在 jQuery 对象中的集合）。

要解决此问题，您可以使用 querySelectorAll() 获取元素，然后使用简单的 forEach() 循环来迭代它们。另请注意，将 CSS 类应用于元素而不是直接样式化是更好的做法，并且需要在元素上放置 transition 规则，然后才能更改要转换的设置。试试这个：

[].forEach.call(document.querySelectorAll('div, h1'), function(element) 
  element.classList.add('red');
);

body 
  display: flex;
  margin: 20px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;


div 
  width: 200px;
  height: 100px;
  background: blue;
  transition: all 1s;


h1 
  color: white;
  background: blue;
  width: 200px;
  transition: all 1s;


.red  
  background-color: red;

<div></div>
<div></div>
<h1>a heading</h1>

【参考方案2】：

使用document.querySelectorAll() 获取静态NodeList，然后使用NodeList.forEach() 对其进行迭代：

var els = document.querySelectorAll("div, h1");

els.forEach(function(el) 
  el.style.cssText = "background: red; transition: 1s"
);

div 
  width: 200px;
  height: 100px;
  background: blue;


h1 
  color: white;
  background: blue;
  width: 200px;

<div></div>
<div></div>
<h1>a heading</h1>

【参考方案3】：

解决方案：

你在这里：

// ----------  Original Code

// $('div, h1').each(function()
//         var myElement = this;
//         myElement.style.cssText = "background: red; transition: 1s"
// );

// ----------  VANILLA JS

const elems = document.querySelectorAll('dev,h1')

elems.forEach(e => 
  e.style.cssText = "background: red; transition: 1s"
)

注意事项：

你不需要在 vanilla js 中使用this。数组中的元素引用就是元素本身！