在javascript中搜索具有另一个数组中的值的数组

Question

我正在尝试从另一个数组中搜索一个具有搜索值的HTML元素数组。在函数CCD_ 1内部有一个数组CCD_。此数组决定搜索的顺序。还有具有要搜索的所有html元素的另一个数组elements。功能块看起来像

getElement(){
const order = ['email-error', 'name-error', 'age-error'];
const elements = document.querySelectorAll('[data-status]')

}

当出现验证错误时，html元素将附加data-status属性。如果出现验证错误，则会调用getElement()函数。对于电子邮件输入，data-status的值将为email-error，对于姓名输入等，name-error。

我试图实现的是；例如：从order数组中取一个值，比如getElement()0。如果elements数组中有一个元素为data-status="email-error"，则搜索该数组。如果存在，则返回元素并停止搜索；否则使用CCD_ 13数组中的所有值进行搜索。

Answer 1

我已经编写了一些HTML来测试代码。

如果您想在所有数组值上循环并检查：

function getElement() {
const order = ['email-error', 'name-error', 'age-error'];
const elements = document.querySelectorAll('[data-status]')
let foundElement = null
elements.forEach((elem) => {
if (order.includes(elem.getAttribute('data-status')) && !foundElement) {
foundElement = elem
}
})
return foundElement
}
console.log(getElement())

<div data-status="email-error"></div>
<div data-status="name-error"></div>
<div data-status="test-class"></div>

Answer 2

也许你可以自己做一个函数，如下所示：https://stackoverflow.com/a/784015/13604954

或者使用内置的Array.prototype.includes：

https://stackoverflow.com/a/40717204/13604954

Answer 3

您可以实现嵌套循环。

for(let i = 0; i < order.length; i++) {
for(let j = 0; j < elements.length; j++) {
if( order[i] == elements[j] ) {
return orders[i] 
}
}
}

这将在两个数组中完全循环，将一个数组中的每个值与另一个数组的每个值匹配，除非存在匹配，在这种情况下，它将返回匹配元素并中断循环。

您还可以使用内置的JS.forEach()方法，该方法会自动循环遍历数组。

order.forEach(orderEl => {
elements.forEach(elementEl => {
if (orderEl === elementEl) {
return orderEl
}
})
})