循环遍历元素不起作用答案

【问题标题】：Looping through elements is not working循环遍历元素不起作用
【发布时间】：2016-02-04 01:36:11
【问题描述】：

我正在尝试为网页上的每个 SVG 添加额外的路径。我设置了我的 for 循环并且它正在工作，但是一旦它循环通过它就会告诉我 appendChild() 不是一个函数。如果我将所有内容都排除在循环之外，appendChild() 就可以了。我在这里做错了什么？

 var svg = document.getElementsByClassName('curve-position-bottom'); //Get svg element
 for (var i = 0; i < svg.length; i++) {
   console.log(svg.length);

   function addPath() {
     console.log('working');
     var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
     newElement.setAttribute("d", "M0 0 C50 100 50 100 100 0  "); //Set path's data
     newElement.style.stroke = "#005780"; //stroke colour
     newElement.style.strokeWidth = "13px"; //Set stroke width
     newElement.style.fill = "none"; //Set stroke width
     svg.appendChild(newElement);
   }
   addPath();

 }

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-bottom" style="fill:#e6e2af">
  <path stroke-width="0" d="M0 0 C50 100 50 100 100 0  L100 100 0 100"></path>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-bottom" style="fill:#e6e2af">
  <path stroke-width="0" d="M0 0 C50 100 50 100 100 0  L100 100 0 100"></path>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-bottom" style="fill:#e6e2af">
  <path stroke-width="0" d="M0 0 C50 100 50 100 100 0  L100 100 0 100"></path>
</svg>

【问题讨论】：

标签： javascript for-loop svg path appendchild

【解决方案1】：

document.getElementsByClassName 的返回值是NodeList，而不是单个元素。要使用您定义的 SVG，您需要使用 svg[i]。

另外，与您的问题无关，但最好将该函数定义移出循环（出于性能和范围界定的原因）并使用 SVG 元素作为参数调用它。它看起来更像这样：

var svg = document.getElementsByClassName('curve-position-bottom'); //Get svg elements

function addPath(svg) {
    console.log('working');
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
    newElement.setAttribute("d", "M0 0 C50 100 50 100 100 0  "); //Set path's data
    newElement.style.stroke = "#005780"; //stroke colour
    newElement.style.strokeWidth = "13px"; //Set stroke width
    newElement.style.fill = "none"; //Set stroke width
    svg.appendChild(newElement);
}

for (var i = 0, length = svg.length; i < length; i++) {
    addPath(svg[i]);
}

【讨论】：

【解决方案2】：

相反

svg.appendChild(newElement);

尝试：

svg[i].appendChild(newElement);

【讨论】：