3

Если написать так:

var childrenSq = document.querySelector('.active-hovered').children.classList;
console.log(childrenSq);

то: не работает, возвращает undefined Класс "active-hovered" добавляется в процессе(поэтому в разметке его нет)

Разметка:

<div class="sq-container row-sq 0">
    <div class="sq"> </div>
    <div class="sq"> </div>
    <div class="sq"> </div>
    <div class="sq"> </div>
    <div class="sq"> </div>
    <div class="sq"> </div>
    <div class="sq"> </div>
    <div class="sq center-sq hovered-button 0"></div>
    <div class="sq"></div>
    <div class="sq"> </div>
    <div class="sq"> </div>
    <div class="sq"> </div>
    <div class="sq"> </div>
    <div class="sq"></div>
    <div class="sq"> </div>
  </div>

P.S. Не использую Jquery

1
  • а у родителя тоже класс active-hovered? и внутри него опять active-hovered?
    – Grundy
    6 окт 2016 в 7:54

1 ответ 1

2

bla-bla-bla.children возвращает HTMLCollection - список элементов. И у него нет свойства classList, оно есть у элементов этого списка.
Нужно циклом извлечь значения элементов (правда classList - это объект DOMTokenList, но можно извлечь классы приведением объекта к строке):

let classes = [];

Array.from(document.querySelector('#test').children).forEach(e => classes.push(e.classList.toString()));

console.info(classes);
.red{color: red;}
.green{color: green;}
.blue{color: blue;}
<div id='test'>
  <span class='red hi'>Hello</span><span class='green'>, </span><span class='blue'>world!</span>
</div>


Если нужно выбрать потомка с классом, тогда достаточно правильного селектора:

// Выбираем потомка с нужным классом на любой вложенности
console.info(document.querySelector('#test .active'));

// Или же этот потомок может быть только прямым
console.info(document.querySelector('#test > .active'));
.active{color: green;}
<div id='test'>
  <span>1</span>
  <div>
    <span class='active'>2</span>
  </div>
  <span class='active'>3</span>
</div>


// Выберем всех потомков с классом sq, но без hovered-button и подкрасим их
Array.from(document.querySelectorAll('.sq-container .sq:not(.hovered-button)')).forEach(e => e.style.color = 'red');
<div class="sq-container row-sq 0">
  <div class="sq">1</div>
  <div class="sq">2</div>
  <div class="sq">3</div>
  <div class="sq">4</div>
  <div class="sq">5</div>
  <div class="sq">6</div>
  <div class="sq">7</div>
  <div class="sq center-sq hovered-button 0">8 (centre)</div>
  <div class="sq">9</div>
  <div class="sq">10</div>
  <div class="sq">11</div>
  <div class="sq">12</div>
  <div class="sq">13</div>
  <div class="sq">14</div>
  <div class="sq">15</div>
</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.