Jquery: динамическое добавление к context.childNodes[4] не работает

Нубский начинающий инженер по интерфейсу здесь. В настоящее время я работаю над приложением для векторного рисования на холсте 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>");
  });
}

но когда я запускаю этот код ^^, я получаю эту ошибку: Uncaught TypeError: $(...).context.childNodes[4].append не является функцией

когда я запускаю console.log($(this).context.childNodes[4]) из каждого(), я получаю

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

для каждой формы, которую я сделал, так что это определенно повторяет их. (к вашему сведению, я добавил основной цвет не динамически, просто в качестве теста)

как я могу добавить к внутренней части выбора?

Любые другие предложения приветствуются!

(также Jquery определенно работает, так что это не проблема с включением его в html;)


person Miloshcavitch    schedule 02.03.2016    source источник


Ответы (2)


.append() не является встроенной функцией javascript. Вы можете использовать .insertAdjacentHTML() для достижения желаемого.

.....  .childNodes[4]
           .insertAdjacentHTML( 'beforeend', "<option value='blue'>" +
                                                  this.name + "</option>" );
person Rajaprabhu Aravindasamy    schedule 02.03.2016
comment
большое спасибо! также хотел бы добавить для тех, кто просматривает это, что this.name в insertAdjacentHTML() не работает, потому что «это» стало $ (это), поэтому я просто использовал исходное имя входной переменной !! - person Miloshcavitch; 02.03.2016

Почему бы просто не выбрать раскрывающийся список, используя его класс, и сделать это следующим образом:

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