Как получить элемент, у которого более одного ребенка?

Question

В этом коде я получаю количество дочерних элементов всех элементов li. Но как я могу получить элемент li, у которого более одного ребенка?

let liLength = document.querySelectorAll('li').length;

for (let i = 0; i < liLength; i++) {
  let liChildrenLength = document.querySelectorAll('li')[i].children.length;

  console.log(liChildrenLength);
}

<body>
  <ul>
    <li><a>list</a></li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
  </ul>
  <script src="main.js"></script>
</body>

javascript

0

black 20 Авг 2018 в 18:06

Answer 1

1 - хранить все li в массиве вместо длины

2 - . Перебирайте их и проверяйте количество детей.

Что-то вроде этого

let lis = document.querySelectorAll('li');

for (let i = 0; i < lis.length; i++) {
  if (lis[i].children.length > 1) {
    console.log(lis[i].children)
    console.log('------------------')
  }
}

<body>
  <ul>
    <li><a>list</a></li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
  </ul>
  <script src="main.js"></script>
</body>

1

Saeed.Ataee 20 Авг 2018 в 15:12

Answer 2

Попробуй это:

let li = [...document.querySelectorAll('li')].filter(function(li) {
   return li.children.length;
});

0

jcubic 20 Авг 2018 в 15:11

Answer 3

Преобразуйте NodeList в {{X1 }} и используйте filter и childNodes.

В зависимости от того, хотите ли вы, чтобы количество фактических элементов по сравнению с узлами было больше 1, вы должны поменять childNodes на children. childNodes будет содержать любой узел, тогда как children содержит только Elements. Посмотрите этот вопрос немного подробнее: В чем разница между дочерними и дочерними узлами в JavaScript?

const arr = Array.from(document.querySelectorAll('li')).filter(li => li.childNodes.length > 1);

console.log(arr);

<body>
  <ul>
    <li><a>list</a></li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
  </ul>
</body>

2

zero298 20 Авг 2018 в 15:25

Answer 4

var liLength = document.querySelectorAll('li').length;

for (var i = 0; i < liLength; i++) {
  var liChildren = document.querySelectorAll('li')[i].children;
  if (liChildren.length > 1)
    for (var j = 0; j < liChildren.length; j++)
      console.log(liChildren[j]);
}

<body>
  <ul>
    <li><a>list</a></li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
  </ul>
  <script src="main.js"></script>
</body>

То же, что и при разборе массива, используйте [indexNumber]

liChildren = document.querySelectorAll('li')[i].children;
liChildren[someIndex]

Надеюсь, что это был вопрос

0

JSmith 20 Авг 2018 в 15:24

Как получить элемент, у которого более одного ребенка?

4 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript