1

Пытаюсь вычислить высоту блока, что бы сделать плавную анимацию. Подскажите как правильно узнать количество потомков li в текущем ul ? Пытасю так let length = e.target.childNodes.length; но почему-то возвращает 19 вместо 9-ти.

https://codepen.io/pen/

let formStep3 = document.querySelector('#step3');

formStep3.addEventListener('click', e => {
  if(e.target.classList.contains('optionList-active')){
        e.target.classList.remove('optionList-active');
                e.target.style.height = "40px";
  } else if (e.target.classList.contains('optionList')){
        e.target.classList.add('optionList-active');
        // e.target.style.height = "100%";
   let length = e.target.childNodes.length;
    e.target.style.height = length*36+'px' ;
    alert(length);
  }
});
.optionList{
    overflow: hidden;
    line-height: 40px;
    color: #fff;
    list-style-type: none;
    text-align: center;
    padding: 0;
    margin: 0;
    background: linear-gradient(90deg, rgba(161,161,161,1) 0%, rgba(29,86,133,1) 0%, rgba(0,52,82,1) 100%, rgba(0,142,255,1) 100%);
    position: relative;
    height: 40px;
    transition: all 1s ease-in-out;
}
.optionList-active{
/*     height: 100%; */
}
.optionList:after{
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    right: 15px;
    width: 20px;
    height: 20px;
    background: url(../img/configurator/arrowWhite.png) no-repeat;
    background-position: center;
    background-size: contain;

}

.configurator-button {
  cursor: pointer;
  width: 673px;
  background-color: #03617f;
  color: #ffffff;
  font-family: "Century Gothic";
  font-size: 18px;
  font-weight: 400;
  line-height: 36px;
  margin: 0;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}

.configurator-button:hover {
  background-color: #059DC3;
}


#step3 {
    max-height: 260px;
    overflow-y: scroll;
    padding-right: 15px;
}
              <form class="configurator-form-1" id="step3">
                <ul class="optionList">Установка тахографа
                    <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
                    <li class="configurator-button configOptions">Установка цифрового тахогр</li>
                    <li class="configurator-button" >Установка цифрового тахографа </li>
                                      <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
                    <li class="configurator-button configOptions">Установка цифрового тахогр</li>
                    <li class="configurator-button" >Установка цифрового тахографа </li>
                                      <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
                    <li class="configurator-button configOptions">Установка цифрового тахогр</li>
                    <li class="configurator-button" >Установка цифрового тахографа </li>
                </ul>

                <ul class="optionList">Установка тахографа 2
                    <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
                    <li class="configurator-button configOptions">Установка цифрового тахогр</li>
                    <li class="configurator-button" >Установка цифрового тахографа </li>
                </ul>

                <ul class="optionList">Установка тахографа 2
                    <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
                    <li class="configurator-button configOptions">Установка цифрового тахогр</li>
                    <li class="configurator-button" >Установка цифрового тахографа </li>
                </ul>

                <ul class="optionList">Установка тахографа
                    <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
                    <li class="configurator-button configOptions">Установка цифрового тахогр</li>
                    <li class="configurator-button" >Установка цифрового тахографа </li>
                </ul>

                <ul class="optionList">Установка тахографа 2
                    <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
                    <li class="configurator-button configOptions">Установка цифрового тахогр</li>
                    <li class="configurator-button" >Установка цифрового тахографа </li>
                </ul>
              </form>

CODPEN**

2 ответа 2

2

Вместо childNodes используйте children

1

В коллекции, возвращаемой свойством childNodes, содержатся все дочерние узлы, включая текстовые.

Для получения только элементов можно воспользоваться свойством children

Либо воспользоваться выборкой с помощью .querySelectorAll

let ol = document.querySelector('.optionList');

console.log(ol.childNodes.length);
console.log(ol.children.length);
console.log(ol.querySelectorAll(':scope > li').length); // не работает в IE/EDGE
.optionList {
  overflow: hidden;
  line-height: 40px;
  color: #fff;
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 0;
  background: linear-gradient(90deg, rgba(161, 161, 161, 1) 0%, rgba(29, 86, 133, 1) 0%, rgba(0, 52, 82, 1) 100%, rgba(0, 142, 255, 1) 100%);
  position: relative;
  height: 40px;
  transition: all 1s ease-in-out;
}

.optionList-active {
  /*     height: 100%; */
}

.optionList:after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  right: 15px;
  width: 20px;
  height: 20px;
  background: url(../img/configurator/arrowWhite.png) no-repeat;
  background-position: center;
  background-size: contain;
}

.configurator-button {
  cursor: pointer;
  width: 673px;
  background-color: #03617f;
  color: #ffffff;
  font-family: "Century Gothic";
  font-size: 18px;
  font-weight: 400;
  line-height: 36px;
  margin: 0;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}

.configurator-button:hover {
  background-color: #059DC3;
}

#step3 {
  max-height: 260px;
  overflow-y: scroll;
  padding-right: 15px;
}
<ul class="optionList">Установка тахографа
  <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
  <li class="configurator-button configOptions">Установка цифрового тахогр</li>
  <li class="configurator-button">Установка цифрового тахографа </li>
  <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
  <li class="configurator-button configOptions">Установка цифрового тахогр</li>
  <li class="configurator-button">Установка цифрового тахографа </li>
  <li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
  <li class="configurator-button configOptions">Установка цифрового тахогр</li>
  <li class="configurator-button">Установка цифрового тахографа </li>
</ul>

Ваш ответ

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

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