Question

我似乎无法理解为什么我会收到此错误。我想要做的就是检查数组是否有一个类别为＆＃39; active＆＃39;的项目。使用Find似乎是正确的，因为它只需要返回1个值。这是我的代码：

const tabWrapper = document.querySelector('.nav-tabs');
const tabs = tabWrapper.getElementsByTagName('li');
const indicator = document.querySelector('.slider-indicator');
const tabWidth = tabWrapper.offsetWidth;
let startPos = tabWrapper.getBoundingClientRect().left;

console.log(tabs);

function checkActive(item) {
    console.log(item.classList.contains('active'));
}

tabs.find(checkActive);

Answer 1

使用querySelector或querySelectorAll可能会更好。

const activeLI = document.querySelector("li.active");
const activeLIs = document.querySelectorAll("li.active");

将返回哪个将为您提供具有活动类的li元素。如果要使用Array方法，则需要将集合转换为数组。

const lis = document.getElementsByTagName('li');
const liArray = Array.from(lis);
console.log(liArray.find) // shows you now have a find method

Answer 2

您需要将NodeList转换为数组。

您选择<li>元素的代码应该没问题，我改了它，所以我可以在示例中使用最小的HTML。

const tabs = document.getElementsByTagName('li');

console.log(tabs);

function checkActive(item) {
    return item.classList.contains('active');
}

console.log("Found anything: " + Boolean(Array.from(tabs).find(checkActive)));

<li class="active">foo</li>
<li class="randomClass">bar</li>

Answer 3

const tabs = Array.prototype.slice.call(tabWrapper.getElementsByTagName('li'));会返回 java.lang.IllegalAccessError: Method 'void android.support.v4.content 节点列表，该列表是 "live" 对象，但不是实际数组（它不是不从Array.prototype继承。因此，它不会实现真实数组所做的所有方法。

如果要在数组结构中使用该节点列表中的元素，则必须将该节点列表转换为实际数组，如下所示：

tabs

现在，回到“实时”节点列表概念......实时节点列表是在每次访问引用它的变量时更新其内容的列表。这意味着（在您的情况下）每次在代码中使用li时，都会重新扫描整个文档以查找所有const tabs = Array.prototype.slice.call(tabWrapper.querySelectorAlll('li'));个元素。只有少数用例需要一个，如果不需要，您可以通过不使用一个来大大提高代码的性能。 "array-like" 是一个更现代的DOM API，它返回一个静态节点列表，通常是首选。

{{1}}

找不到功能

3 个答案: