Question

我希望执行以下操作，但不确定如何正确使用true中定位的内容。

这就是我所拥有的：

.startsWith

如上所示，我试图在var divClass = document.querySelector('div').getAttribute('class'); if (divClass.startsWith('example')){ divClass.classList.add('width', 'height'); }上使用classList.add()，但没有优先权。我相信这种策略确实不正确，但是，我相信以下内容更接近......

divClass

...虽然我很难直接定位示例并使用var divClass = document.querySelector('div').getAttribute('class'); if (divClass.startsWith("example")){ example.classList.add('width', 'height'); }将类应用于示例类的所有div。

如果有人对此有解决方案，我将非常感谢并提前感谢您！

仅供参考 - 所有解决方案均采用Vanilla JavaScript（无jQuery）

Answer 1

使用以example开头的类名检索所有div并迭代您找到的节点集

let divClass = document.querySelectorAll('div[class^="example"]');
[].forEach.call(divClass, function(div) {
  /* do something on div */
});

Answer 2

您可以使用此选择器 getElementsByClassName

{{1}}

用于搜索类似的类，此解决方案可以正常工作

{{1}}

Answer 3

querySelector只获取一个元素，因此您只选择页面上的第一个div并使用它。要获取元素列表，请使用querySelectorAll。

在jQuery中你可以调用$('div').addClass('example')，你不必关心是否有一个div或者很多，因为jQuery会为你处理所有这些问题。没有jQuery，你必须自己进行迭代：

var divs = document.querySelectorAll('div');
for ( var i = 0; i < divs.length; i++ ) {
    divs[ i ].classList.add('example')  
}

或者

document.querySelectorAll('div').forEach(div => div.classList.add('example'))

document.querySelectorAll( selector )与$( selector )非常相似，但document.querySelector( selector )更像$( selector ).first()。

将.classList.add（）应用于.startsWith（“example”） - 没有jQuery的所有div

3 个答案: