Javascript 如何在Polymer 1.0元素中循环一组DOM元素？

我试图循环使用一组静态纸质复选框元素，但我的代码在以下方面失败：

“未捕获的TypeError:this.querySelectorAll（…）.forEach不是函数”

相关代码行为：

this.querySelectorAll('paper-checkbox').forEach(function(cb) {

我敢肯定是我太笨了——但是我在选择和/或遍历所选（静态）复选框时有什么不正确的地方

我正在寻找替代JQuery的.each（）函数的Polymer 1.0

非常感谢

这是因为

this.querySelector('paper-checkbox') 

是空的

我认为你需要进入阴影根以获得元素，例如

 this.shadowRoot.querySelectorAll('paper-checkbox')

增加：

this.shadowRoot.querySelectorAll('paper-checkbox').array().forEach(function(cb) {

这是因为

this.querySelector('paper-checkbox') 

是空的

我认为你需要进入阴影根以获得元素，例如

 this.shadowRoot.querySelectorAll('paper-checkbox')

增加：

this.shadowRoot.querySelectorAll('paper-checkbox').array().forEach(function(cb) {

---

回答：您需要使用

dom repeat

---

根据报告：

“dom repeat元素是一个自定义的HTMLTemplateElement类型扩展，它自动将模板内容的一个实例标记并绑定到用户提供的数组中的每个对象。”

---

示例代码：

<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>

员工名单：
名字：{{item.First}
姓氏：{{item.Last}
聚合物({
是‘员工名单’，
就绪：函数（）{
这是我的雇员=[{
第一个：'鲍勃'，
最后：“史密斯”
}, {
第一个：“莎莉”，
最后：“约翰逊”
}, ...];
}
});

回答：您需要使用

dom repeat

---

根据报告：

“dom repeat元素是一个自定义的HTMLTemplateElement类型扩展，它自动将模板内容的一个实例标记并绑定到用户提供的数组中的每个对象。”

---

示例代码：

<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>

员工名单：
名字：{{item.First}
姓氏：{{item.Last}
聚合物({
是‘员工名单’，
就绪：函数（）{
这是我的雇员=[{
第一个：'鲍勃'，
最后：“史密斯”
}, {
第一个：“莎莉”，
最后：“约翰逊”
}, ...];
}
});
感谢您的回复。我刚刚找到了解决办法

而不是：

this.querySelectorAll()

我应该使用：

Polymer.dom(this).querySelectorAll()

现在效果很好

再次感谢。
感谢您的回复。我刚刚找到了解决办法

而不是：

this.querySelectorAll()

我应该使用：

Polymer.dom(this).querySelectorAll()

现在效果很好

再次感谢。
问题在于
这个。queryselectoral（'paper-checkbox'）
返回节点列表，而不是数组。它们看起来很相似，但却不同。
NodeList的原型上没有foreach的方法

一个简单的解决方案是将节点列表转换为如下数组：
Array.prototype.slice.call（document.queryselectoral（'paper-checkbox'））

我建议您阅读MDN中有关此主题的内容。
问题在于
此问题。querySelectorAll（'paper-checkbox'）
返回节点列表，而不是数组。它们看起来很相似，但却不同。
NodeList的原型上没有foreach的方法

一个简单的解决方案是将节点列表转换为如下数组：
Array.prototype.slice.call（document.queryselectoral（'paper-checkbox'））

我建议您阅读MDN中有关此主题的文章。
你好，pmo。shadowRoot也为null，因此querySelectorAll失败（无法读取null的属性'querySelectorAll'我有querySelector而不是querySelectAll，这一点很好理解。但是仍然有相同的问题。很抱歉，您也需要添加.array（）。我将完整编辑以上答案。您何时调用forEach函数？如果在将元素放入dom之前调用它，结果可能为null，这就是我所能想到的？嗨，pmo。shadowRoot也为null，因此querySelectorAll失败（无法读取null的属性'querySelectorAll'我有querySelector而不是querySelectAll，这一点很好理解。但是仍然有相同的问题。很抱歉，您也需要添加.array（）。我将完整编辑以上答案。您何时调用forEach函数？如果在元素放入dom之前调用它，结果可能为空，这就是我所能想到的？嗨，莫泽尔。为了清楚起见，我编辑了我的问题。查询不是关于如何通过数组循环生成动态内容，而是关于如何（通过javascript函数）通过一组静态复选框（或任何元素）循环。再次感谢。@迈尔斯：如果你能提供更多的上下文，也许我能帮上忙？例如，您可以发布整个元素的代码吗？我猜你是在一个元素中写的？还是你？还有，你为什么要在复选框中循环？你的最终目标是什么？嗨，莫泽尔。为了清楚起见，我编辑了我的问题。查询不是关于如何通过数组循环生成动态内容，而是关于如何（通过javascript函数）通过一组静态复选框（或任何元素）循环。再次感谢。@迈尔斯：如果你能提供更多的上下文，也许我能帮上忙？例如，您可以发布整个元素的代码吗？我猜你是在一个元素中写的？还是你？还有，你为什么要在复选框中循环？你的最终目标是什么？