英文:
Is there any way to loop over collection of DOM elements without looping in vanilla JS?
问题
我想操作一组DOM元素。
这是一个示例：
HTML：
<div class="items">
<p class="item">这里有一些文本</p>
<p class="item">这里有另一些文本</p>
<p class="item">这里有一些更多的文本</p>
</div>
JS：
const items = document.querySelectorAll(".item")
// 这是我以纯JS方式实现的方式
items.forEach(item => {
item.style.color = "#333"
})
// 我想要实现类似jQuery的效果，不必使用循环
$(".item").css("color", "#333")
提前感谢！
我尝试寻找解决方案，但找不到最佳解决方案。
英文:
I want to manipulate a collection of DOM elements..
Here's an Example:
HTML:
<div class="items">
<p class="item">Here's some text</p>
<p class="item">Here's another text</p>
<p class="item">Here's some another text</p>
</div>
JS:
const items = document.querySelectorAll(".item")
// This is how I do this vanilla JS way
items.forEach(item => {
item.style.color = "#333"
})
// I want to achieve something like jQuery where we don't have to use loop
$(".item").css("color", "#333")
Thanks in advance!
I tried finding solutions but could not find the best solution.
答案1
得分: 4
以下是翻译好的部分：
这是一个不使用循环的版本，而且速度非常快 - 我改变了颜色以展示它的效果更好：
const someStyle = `<style>div.items .item { color: #A33; }</style>`;
document.head.insertAdjacentHTML('beforeend', someStyle);
<div class="items">
<p class="item">这里有一些文本</p>
<p class="item">这里有另一些文本</p>
<p class="item">这里有一些其他文本</p>
</div>
英文:
Here is one version that does not use a loop and it is really fast too - I changed the colour to show it works better:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const someStyle = `<style>div.items .item { color: #A33; }</style>`;
document.head.insertAdjacentHTML('beforeend', someStyle);
<!-- language: lang-html -->
<div class="items">
<p class="item">Here's some text</p>
<p class="item">Here's another text</p>
<p class="item">Here's some another text</p>
</div>
<!-- end snippet -->
答案2
得分: 3
你可以在NodeList原型上进行Monkey Patch，或者编写一个类似的函数/类/工厂，而无需进行Monkey Patch（例如jQuery的方式）：
NodeList.prototype.css = function(name, val){
this.forEach(elem => elem.style[name] = val);
return this;
};
class DomSet{
constructor(nodelist){
this.nodelist = nodelist;
}
css(name, val){
this.nodelist.forEach(elem => elem.style[name] = val);
return this;
}
}
const $ = function(selector){
return new DomSet(document.querySelectorAll(selector));
}
document.querySelectorAll('.items .item')
.css('color', 'red')
.css('background', 'lightgray');
$('.items2 .item')
.css('color', 'blue')
.css('background', 'yellow');
<div class="items">
<p class="item">Here's some text</p>
<p class="item">Here's another text</p>
<p class="item">Here's some another text</p>
</div>
<div class="items2">
<p class="item">Here's some text</p>
<p class="item">Here's another text</p>
<p class="item">Here's some another text</p>
</div>
英文:
You can monkey patch the NodeList prototype or write an alike function/class/factory without monkey patching (like jQuery for example):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
NodeList.prototype.css = function(name, val){
this.forEach(elem => elem.style[name] = val);
return this;
};
class DomSet{
constructor(nodelist){
this.nodelist = nodelist;
}
css(name, val){
this.nodelist.forEach(elem => elem.style[name] = val);
return this;
}
}
const $ = function(selector){
return new DomSet(document.querySelectorAll(selector));
}
document.querySelectorAll('.items .item')
.css('color', 'red')
.css('background', 'lightgray');
$('.items2 .item')
.css('color', 'blue')
.css('background', 'yellow');
<!-- language: lang-html -->
<div class="items">
<p class="item">Here's some text</p>
<p class="item">Here's another text</p>
<p class="item">Here's some another text</p>
</div>
<div class="items2">
<p class="item">Here's some text</p>
<p class="item">Here's another text</p>
<p class="item">Here's some another text</p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论