如何有效缩短javascript代码DOM选择器

Question

我正在将项目中的脚本从jquery更改为纯js。。目前我是这样做的

jquery脚本(原始(

$('.class1').show();

转换为普通javascript

const elems = document.querySelectorAll('.class1');
elems.forEach(elem => {
elem.style.display = 'inline-block';
});

有没有一种更有效和/或更优雅的方法(但仍然易于理解和阅读(可以在普通javascript中做到这一点？

Answer 1

在不更改任何其他内容的情况下，您可能会做的最好的事情是

for (const elm of document.querySelectorAll('.class1'))  {
elem.style.display = 'inline-block';
}

人们可能更喜欢的另一种可能性是在父元素上切换一个类，并使用CSS规则，以便当父类处于活动状态时，.class1的后代获得display: inline-block，例如

parent.classList.add('show-children');

Answer 2

您还可以创建一个小型jquery插件替换：p

如果添加了足够多的方法，就不需要一次更改所有jquery：p

const $ = (selector, root=document) => Object.assign({selected: root.querySelectorAll(selector)}, {
show() { this.selected.forEach(e=>e.style.display='inline-block'); return this; },
hide() { this.selected.forEach(e=>e.style.display='none'); return this; }
});
setTimeout(() => { // timeout for dramatic effect :p
$('.class1').show();
}, 1000);

.class1 {
display: none;
}

<div class="class1">Hidden 1</div>
<div class="class1">Hidden 2</div>