If you write this:

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

then: does not work, returns undefined The class "active-hovered" is added in the process (therefore there is no markup in it)

Markup:

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

PS I do not use jQuery

  • and the parent also has an active-hovered class ? and inside it again active-hovered ? - Grundy

1 answer 1

bla-bla-bla.children returns a HTMLCollection - a list of items. And it does not have the classList property, it is in the elements of this list.
You need a cycle to extract the values ​​of the elements (although the classList is a DOMTokenList object, but you can extract the classes by casting an object to a string):

 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>

If you need to select a child with a class, then the correct selector is enough:

 // Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ° с Π½ΡƒΠΆΠ½Ρ‹ΠΌ классом Π½Π° любой влоТСнности 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>

  • Comments are not intended for extended discussion; conversation moved to chat . - Nick Volynkin ♦