Свойство DOM children получает элементы, но без их классов

Question

Я хочу выбрать все дочерние элементы элемента <select>, используя свойство .children DOM.Когда дети возвращаются, когда я пытаюсь проверить, есть ли у них класс, или когда я записываю их в консоль, класс не отображается, даже если у них есть несколько классов в разметке.

Структура select:

<select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">
    <option value="">Choose an option</option>
    <option value="blue" class="attached" disabled="">Blue</option>
    <option value="gray" class="attached enabled">Gray</option>
    <option value="green" class="attached" disabled="">Green</option>
    <option value="red" class="attached enabled">Red</option>
    <option value="yellow" class="attached enabled">Yellow</option>
</select>

Как выбрать детей:

var selects = $(".variations").find("select");
var selectOpts = selects[i].children;
console.log(selectOpts);

Что показано на консоли:

РЕДАКТИРОВАТЬ: может показаться, что это происходит только тогда, когда я консоль журнала отдельных детей, как в console.log(selectOpts[2]) будет отображаться <option value="gray">Gray</option>, но console.log(selectOpts) показывает всех их с их классами.

Answer 1

Я предполагаю, что вы пытаетесь собрать classNames тегов <option>

Использование JQuery

const children = $("#pa_color").children();
const classNames = children.map((index,item) => $(item).attr("class"))
console.log(classNames)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="variations">
  <select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">
    <option value="">Choose an option</option>
    <option value="blue" class="attached" disabled="">Blue</option>
    <option value="gray" class="attached enabled">Gray</option>
    <option value="green" class="attached" disabled="">Green</option>
    <option value="red" class="attached enabled">Red</option>
    <option value="yellow" class="attached enabled">Yellow</option>
</select>
</div>

без JQuery

const element = document.getElementById("pa_color");
const children = [].slice.call(element.children);
const classNames = children.map( child => child.className);
console.log(classNames)

<div class="variations">
  <select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">
    <option value="">Choose an option</option>
    <option value="blue" class="attached" disabled="">Blue</option>
    <option value="gray" class="attached enabled">Gray</option>
    <option value="green" class="attached" disabled="">Green</option>
    <option value="red" class="attached enabled">Red</option>
    <option value="yellow" class="attached enabled">Yellow</option>
</select>
</div>

Answer 2

Ваш цитируемый код слишком фрагментарен, чтобы быть уверенным в том, что с ним не так, но дочерние элементы do имеют классы. Может показаться, что любой показ, который вы цитируете, не показывает их по какой-то причине (что странно), но они есть:

var selects = $(".variations").find("select");
var i = 0; // Our example has only one
var selectOpts = selects[i].children;
for (var n = 0; n < selectOpts.length; ++n) {
  console.log("child " + n + " className: " + selectOpts[n].className);
}

<div class="variations">
  <select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">
      <option value="">Choose an option</option>
      <option value="blue" class="attached" disabled="">Blue</option>
      <option value="gray" class="attached enabled">Gray</option>
      <option value="green" class="attached" disabled="">Green</option>
      <option value="red" class="attached enabled">Red</option>
      <option value="yellow" class="attached enabled">Yellow</option>
  </select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>