Question

在vanilla JS中，我正在尝试为所有“li”设置一个属性，这些“li”在特定的类下有某些父母。

基本上如果它符合“.qa ul li”，则将tabindex设置为0。

现在我正在使用：

for(var i = 0; i < document.getElementsByTagName('li').length; i++){
    if(????) document.getElementsByTagName('li')[i].tabIndex = 0;
    }

我的问题是我不知道如何查看特定的“li”是否属于“qa”类下的“ul”。

如果我得到它，那么不同的方法会更好吗？我有很多“李”，并不是都符合我的标准。

Answer 1

您可以使用getElementsByTagName()：

而不是querySelectorAll()

var elements = document.querySelectorAll('.qa ul li');

for(var i = 0; i < elements.length; i++){
    elements[i].tabIndex = 0;
}

这将只选择您正在寻找的<li>元素 - 不需要条件逻辑。

我还将重复的DOM搜索组合成一个变量。而不是搜索DOM以初始化for然后为每个后续迭代，您只需要一个 DOM搜索。

示例：

var elements = document.querySelectorAll('.qa ul li'); for (var i = 0; i < elements.length; i++) { elements[i].style.color = 'red'; }

<div class="qa"> Parent has QA class: <ul> <li>TEST</li> <li>TEST</li> <li>TEST</li> </ul> </div> <div> Parent does not have QA class: <ul> <li>TEST</li> <li>TEST</li> <li>TEST</li> </ul> </div>

Answer 2

您的代码中存在一些让我感到害怕的问题，您应该了解性能影响。首先：

for(var i = 0; i < document.getElementsByTagName('li').length; i++)

这意味着您正在执行document.getElementsByTagName('li').length every time you increment i，并且查询DOM是一项昂贵的操作。相反，你应该这样做：

for(var i = 0, length = document.getElementsByTagName('li').length; i < length; i++)

document.getElementsByTagName('li')[i]语句中的if也是如此，但正如评论所指出的那样，如果您使用querySelectorAll()，则不需要if正确的选择器：

var li = document.querySelectorAll('.qa ul li');

for(var i = 0; i < li.length; i++) {
  li[i].tabIndex = 0;
}

在此代码中，querySelector()仅执行一次，.length的每次迭代仅使用便宜的i属性引用。

循环遍历满足标准的所有元素

2 个答案: