blocks|key|1810051|text|谢谢你的回复。我刚刚找到了解决方案，这里。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1810052|而不是：|1810053|this.querySelectorAll()|code-block|syntax|javascript|1810054|我应该用：|1810055|Polymer.dom(this).querySelectorAll()|1810056|现在工作得很好！|1810057|再次感谢。|1810058|entityMap|0|LINK|mutability|MUTABLE|url|https://www.polymer-project.org/1.0/docs/migration.html^0|I|2|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>Thanks for the responses.  I've just found the solution <a href="https://www.polymer-project.org/1.0/docs/migration.html" rel="nofollow">here</a>.</p>

<p>Instead of:</p>

<pre><code>this.querySelectorAll()
</code></pre>

<p>I should have been using:</p>

<pre><code>Polymer.dom(this).querySelectorAll()
</code></pre>

<p>Works perfectly now!</p>

<p>Thanks again.</p>


blocks|key|1810076|text|问题是this.querySelectorAll('paper-checkbox')返回一个NodeList，而不是数组。它们看起来很相似，但它们是不同的。NodeList的原型中没有foreach方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1810077|一个简单的解决方案是将Nodelist转换为如下数组：Array.prototype.slice.call(document.querySelectorAll('paper-checkbox'))|1810078|我建议您阅读MDN中有关此主题的这篇文章。|1810079|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/NodeList^0|3|13|2K|7|0|R|1Z|0|G|4|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|J|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

<p>The problem is <code>this.querySelectorAll('paper-checkbox')</code> returns a NodeList, not an Array. They looks similar but they are different.
NodeList doesn't have the method <code>foreach</code> on its prototype.</p>

<p>An easy solution is to convert your Nodelist to Array like this:
<code>Array.prototype.slice.call(document.querySelectorAll('paper-checkbox'))</code></p>

<p>I suggest you to read <a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList" rel="nofollow">this article</a> in MDN on this topic.</p>


blocks|key|1810003|text|这是因为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1810004|this.querySelector('paper-checkbox')+|code-block|syntax|javascript|1810005|是空的。|1810006|我认为你需要进入阴影根来得到元素。|1810007|+this.shadowRoot.querySelectorAll('paper-checkbox')|1810008|添加：|1810009|this.shadowRoot.querySelectorAll('paper-checkbox').array().forEach(function(cb)+{|1810010|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>This is because </p>

<pre><code>this.querySelector('paper-checkbox') 
</code></pre>

<p>is null.</p>

<p>I think you need to go into the shadow root to get the elements e.g.</p>

<pre><code> this.shadowRoot.querySelectorAll('paper-checkbox')
</code></pre>

<p>added:</p>

<pre><code>this.shadowRoot.querySelectorAll('paper-checkbox').array().forEach(function(cb) {
</code></pre>


blocks|key|1810033|text|回答：，您需要使用dom-repeat。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1810034|​|1810035|根据这里的API文档|1810036|1810037|多姆-重复元素是一个自定义的HTMLTemplateElement类型扩展，它自动标记并将模板内容的一个实例绑定到用户提供的数组中的每个对象。|blockquote|1810038|1810039|示例代码：|1810040|1810041|<dom-module+id="employee-list">
++<template>
++++<div>+Employee+list:+</div>
++++<template+is="dom-repeat"+items="{{employees}}">
++++++<div>First+name:+<span>{{item.first}}</span></div>
++++++<div>Last+name:+<span>{{item.last}}</span></div>
++++</template>
++</template>
++<script>
++++Polymer({
++++++is:+'employee-list',
++++++ready:+function()+{
++++++++this.employees+=+[{
++++++++++first:+'Bob',
++++++++++last:+'Smith'
++++++++},+{
++++++++++first:+'Sally',
++++++++++last:+'Johnson'
++++++++},+...];
++++++}
++++});
++</script>
</dom-module>|code-block|syntax|javascript|1810042|entityMap|0|LINK|mutability|MUTABLE|url|http://polymer.github.io/polymer/^0|0|3|9|A|0|0|2|8|0|0|0|0|0|0|5|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1A|8|@]|E|@]|F|$]]|$1|I|3|J|5|6|7|1B|8|@]|E|@$9|1C|A|1D|1|1E]]|F|$]]|$1|K|3|H|5|6|7|1F|8|@]|E|@]|F|$]]|$1|L|3|M|5|N|7|1G|8|@]|E|@]|F|$]]|$1|O|3|H|5|6|7|1H|8|@]|E|@]|F|$]]|$1|P|3|Q|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|E|@]|F|$]]|$1|R|3|H|5|6|7|1L|8|@]|E|@]|F|$]]|$1|S|3|T|5|U|7|1M|8|@]|E|@]|F|$V|W]]|$1|X|3|-4|5|6|7|1N|8|@]|E|@]|F|$]]]|Y|$Z|$5|10|11|12|F|$13|14]]]]

<p><strong>Answer:</strong> You need to use <code>dom-repeat</code>.</p>

<p><hr>
According to the <a href="http://polymer.github.io/polymer/" rel="nofollow">API documentation here</a>:</p>

<blockquote>
  <p><em>"The dom-repeat element is a custom HTMLTemplateElement type extension that automatically stamps and binds one instance of template content to each object in a user-provided array."</em></p>
</blockquote>

<p><hr>
<strong>Example Code:</strong></p>

<pre><code>&lt;dom-module id="employee-list"&gt;
  &lt;template&gt;
    &lt;div&gt; Employee list: &lt;/div&gt;
    &lt;template is="dom-repeat" items="{{employees}}"&gt;
      &lt;div&gt;First name: &lt;span&gt;{{item.first}}&lt;/span&gt;&lt;/div&gt;
      &lt;div&gt;Last name: &lt;span&gt;{{item.last}}&lt;/span&gt;&lt;/div&gt;
    &lt;/template&gt;
  &lt;/template&gt;
  &lt;script&gt;
    Polymer({
      is: 'employee-list',
      ready: function() {
        this.employees = [{
          first: 'Bob',
          last: 'Smith'
        }, {
          first: 'Sally',
          last: 'Johnson'
        }, ...];
      }
    });
  &lt;/script&gt;
&lt;/dom-module&gt;
</code></pre>


<p>I'm trying to loop through a set of static paper-checkbox elements, but my code is failing with:</p>

<p>"Uncaught TypeError: this.querySelectorAll(...).forEach is not a function"</p>

<p>The relevant line of code is:</p>

<pre><code>this.querySelectorAll('paper-checkbox').forEach(function(cb) {
</code></pre>

<p>I'm sure it's me being dumb - but what am I doing incorrectly in either selecting and/or iterating through the selected (static) checkboxes?</p>

<p>I'm effectively looking for the Polymer 1.0 alternative to JQuery's .each() function.</p>

<p>Many thanks!</p>


How am I meant to loop through a set of DOM elements within a Polymer 1.0 Element?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我试图遍历一组静态的纸质复选框元素，但是我的代码在以下方面失败了："Uncaught :this.querySelectorAll(.).forEach不是函数“相关的代码行是：this.querySelectorAll('paper-checkbox').forEach(function(cb) {我确信这是我的愚蠢-但在选择和/或迭代所选(静态)复选框时，我做错了什么呢？我实际上是在寻找替代J

问我是如何循环在Polymer1.0元素中遍历一组DOM元素的？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我是如何循环在Polymer1.0元素中遍历一组DOM元素的？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我是如何循环在Polymer1.0元素中遍历一组DOM元素的？
EN