Jquery:动态追加到context.childNodes[4]不起作用

Jquery: dynamically appending to context.childNodes[4] not working

本文关键字：不起作用 childNodes context 动态 追加 Jquery      更新时间：2023-09-26

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

这个想法是你画一个形状，在该形状菜单中选择"主要"（或你之前创建的任何颜色变量），并将形状颜色设置为任何主要颜色，这可以很容易地在"主要"颜色变量的单独菜单中更改。

我正在使用html select，当创建新颜色时，我需要更新已创建的矢量形状（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>");
  });
}

但是当我运行该^^代码时，出现此错误： 未捕获的类型错误： $（...）。context.childNodes[4].append 不是一个函数

当我从 each（） 中运行一个控制台.log（$（this）.context.childNodes[4]） 时，我得到

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

对于我制作的每一个形状，所以它肯定会迭代它们。（仅供参考，我非动态地添加了原色作为测试）

如何附加到选择的内部？

欢迎任何其他建议！

（Jquery肯定可以工作，所以将其包含在html;)中不是问题

.append()不是原生的JavaScript函数。您可以使用.insertAdjacentHTML()来实现您想要的。

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

为什么不直接使用它的类选择下拉列表并像这样操作：

$(".colorList").append("<option value='blue'>"+this.name+"</option>");
相关文章：