Question

noobish有抱负的前端工程师在这里。我目前正在开发一个html5画布矢量绘图应用程序，使调色板交换变得容易。我正在开发一个函数，它创建一个命名的颜色变量/对象（例如＆＃39; primary＆＃39;或＆＃39; secondary＆＃39;）并将其存储在自己的数组中以便安全保存但是也将它附加到一个颜色选择器/调色板交换器，用于创建每个矢量形状的菜单。

这个想法是你绘制一个形状，选择＆＃39; primary＆＃39; （或者您之前创建的任何颜色变量）在该形状菜单中，形状颜色设置为主要颜色，可以在“主要”的单独菜单中轻松更改。颜色变量。

我正在使用html select＆＃39; s并且在创建新颜色时我需要更新菜单，以获取已创建的矢量形状（在li中保存的信息）。我正在使用这个迭代颜色变量构造函数中的那些：

var colorVar = function(name, hexstring){
   this.name = name;
   this.color = hexstring;
   //append colors to drop downs
   $( "li" ).each(function( index ) {
   $(this).context.childNodes[4].append("<option value='blue'>" + this.name + "</option>");
  });
}

但是当我运行^^代码时，我收到此错误：未捕获的TypeError：$（...）。context.childNodes [4] .append不是函数

当我从each（）中运行console.log（$（this）.context.childNodes [4]）时我得到了

<select class='colorList'>
    <option value='blue'>primary color</option>
</select>

对于我所做的每一个形状，所以它肯定会遍历它们。（我可以非动态地添加原色作为测试）

如何附加到选择内部？

欢迎任何其他建议！

（Jquery肯定也在工作，因此将它包含在html中不是问题;）

Answer 1

.append()不是原生的javascript函数。您可以使用.insertAdjacentHTML()来实现您的目标。

.....  .childNodes[4]
           .insertAdjacentHTML( 'beforeend', "<option value='blue'>" +
                                                  this.name + "</option>" );

Answer 2

为什么不选择使用它的类下拉，并按照以下方式选择：

$(".colorList").append("<option value='blue'>"+this.name+"</option>");

Jquery：动态地附加到context.childNodes [4]不起作用

2 个答案: