DOM children属性获得元素，但没有其类

Question

我想使用<select> DOM属性选择.children元素的所有子元素。返回孩子时，当我尝试检查他们是否有课程或将他们登录到控制台时，即使他们在标记中有多个课程，也不会显示任何课程。

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

您引用的代码过于零散，无法真正确定问题所在，但是子元素 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>

Answer 2

我假设您正在尝试收集<option>标签的classNames

使用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>