有没有在原生JS中在DOM元素集合上循环而不使用循环的方法？

huangapple
go评论94阅读模式
英文:

Is there any way to loop over collection of DOM elements without looping in vanilla JS?

问题

我想操作一组DOM元素。

这是一个示例：

HTML：

  1. <div class="items">
  2.   <p class="item">这里有一些文本</p>
  3.   <p class="item">这里有另一些文本</p>
  4.   <p class="item">这里有一些更多的文本</p>
  5. </div>

JS：

  1. const items = document.querySelectorAll(".item")
  3. // 这是我以纯JS方式实现的方式
  4. items.forEach(item => {
  5.   item.style.color = "#333"
  6. })
  8. // 我想要实现类似jQuery的效果，不必使用循环
  10. $(".item").css("color", "#333")

提前感谢！

我尝试寻找解决方案，但找不到最佳解决方案。

英文:

I want to manipulate a collection of DOM elements..

Here's an Example:

HTML:

  1. &lt;div class=&quot;items&quot;&gt;
  2.   &lt;p class=&quot;item&quot;&gt;Here&#39;s some text&lt;/p&gt;
  3.   &lt;p class=&quot;item&quot;&gt;Here&#39;s another text&lt;/p&gt;
  4.   &lt;p class=&quot;item&quot;&gt;Here&#39;s some another text&lt;/p&gt;
  5. &lt;/div&gt;

JS:

  1. const items = document.querySelectorAll(&quot;.item&quot;)
  3. // This is how I do this vanilla JS way
  4. items.forEach(item =&gt; {
  5.   item.style.color = &quot;#333&quot;
  6. })
  8. // I want to achieve something like jQuery where we don&#39;t have to use loop
  10. $(&quot;.item&quot;).css(&quot;color&quot;, &quot;#333&quot;)

Thanks in advance!

I tried finding solutions but could not find the best solution.

答案1

得分: 4

以下是翻译好的部分：

这是一个不使用循环的版本，而且速度非常快 - 我改变了颜色以展示它的效果更好：

  1. const someStyle = `<style>div.items .item { color: #A33; }</style>`;
  3. document.head.insertAdjacentHTML('beforeend', someStyle);
  1. <div class="items">
  2.   <p class="item">这里有一些文本</p>
  3.   <p class="item">这里有另一些文本</p>
  4.   <p class="item">这里有一些其他文本</p>
  5. </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 -->

  1. const someStyle = `&lt;style&gt;div.items .item { color: #A33; }&lt;/style&gt;`;
  3. document.head.insertAdjacentHTML(&#39;beforeend&#39;, someStyle);

<!-- language: lang-html -->

  1. &lt;div class=&quot;items&quot;&gt;
  2.   &lt;p class=&quot;item&quot;&gt;Here&#39;s some text&lt;/p&gt;
  3.   &lt;p class=&quot;item&quot;&gt;Here&#39;s another text&lt;/p&gt;
  4.   &lt;p class=&quot;item&quot;&gt;Here&#39;s some another text&lt;/p&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 3

你可以在NodeList原型上进行Monkey Patch，或者编写一个类似的函数/类/工厂，而无需进行Monkey Patch（例如jQuery的方式）：

  1. NodeList.prototype.css = function(name, val){
  2.   this.forEach(elem => elem.style[name] = val);
  3.   return this;
  4. };
  6. class DomSet{
  7.   constructor(nodelist){
  8.     this.nodelist = nodelist;
  9.   }
  10.   css(name, val){
  11.     this.nodelist.forEach(elem => elem.style[name] = val);
  12.     return this;    
  13.   }
  14. }
  16. const $ = function(selector){
  17.   return new DomSet(document.querySelectorAll(selector));
  18. }
  20. document.querySelectorAll('.items .item')
  21.   .css('color', 'red')
  22.   .css('background', 'lightgray');
  23.   
  24. $('.items2 .item')
  25.   .css('color', 'blue')
  26.   .css('background', 'yellow');
  1. <div class="items">
  2.   <p class="item">Here's some text</p>
  3.   <p class="item">Here's another text</p>
  4.   <p class="item">Here's some another text</p>
  5. </div>
  7. <div class="items2">
  8.   <p class="item">Here's some text</p>
  9.   <p class="item">Here's another text</p>
  10.   <p class="item">Here's some another text</p>
  11. </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 -->

  1. NodeList.prototype.css = function(name, val){
  2.   this.forEach(elem =&gt; elem.style[name] = val);
  3.   return this;
  4. };
  6. class DomSet{
  7.   constructor(nodelist){
  8.     this.nodelist = nodelist;
  9.   }
  10.   css(name, val){
  11.     this.nodelist.forEach(elem =&gt; elem.style[name] = val);
  12.     return this;    
  13.   }
  14. }
  16. const $ = function(selector){
  17.   return new DomSet(document.querySelectorAll(selector));
  18. }
  20. document.querySelectorAll(&#39;.items .item&#39;)
  21.   .css(&#39;color&#39;, &#39;red&#39;)
  22.   .css(&#39;background&#39;, &#39;lightgray&#39;);
  23.   
  24. $(&#39;.items2 .item&#39;)
  25.   .css(&#39;color&#39;, &#39;blue&#39;)
  26.   .css(&#39;background&#39;, &#39;yellow&#39;);

<!-- language: lang-html -->

  1. &lt;div class=&quot;items&quot;&gt;
  2.   &lt;p class=&quot;item&quot;&gt;Here&#39;s some text&lt;/p&gt;
  3.   &lt;p class=&quot;item&quot;&gt;Here&#39;s another text&lt;/p&gt;
  4.   &lt;p class=&quot;item&quot;&gt;Here&#39;s some another text&lt;/p&gt;
  5. &lt;/div&gt;
  7. &lt;div class=&quot;items2&quot;&gt;
  8.   &lt;p class=&quot;item&quot;&gt;Here&#39;s some text&lt;/p&gt;
  9.   &lt;p class=&quot;item&quot;&gt;Here&#39;s another text&lt;/p&gt;
  10.   &lt;p class=&quot;item&quot;&gt;Here&#39;s some another text&lt;/p&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月6日 20:01:39
  • 转载请务必保留本文链接：https://go.coder-hub.com/76628613.html
  • dom
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定