How to get element who has more than one child?

Question

In this code I get the number of children of all li elements. But how can I get li element who has more than one child?

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>

zero298 · Answer 1 · 2018-08-20T15:25:23.137

2

Convert the NodeList to an Array and use filter and childNodes.

Depending on if you want the number of actual elements vs nodes to be greater than 1, you should swap childNodes for children. childNodes will include any node, while children only contains Elements. See this question for a little bit more detail: What is the difference between children and childNodes in 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>

edited Aug 20 '18 at 15:25

answered Aug 20 '18 at 15:11

zero298

25,467
10
75
100

`.childNodes` will also contain text nodes (like a newline character). With this markup it will work, but if (for whatever reason) the anchor tags will be put on separate lines this won't yield the expected result ([Example](http://jsfiddle.net/4yjfsnuL/)). – Andreas Aug 20 '18 at 15:16
@Andreas True, but I'm not sure if the OP wants only tags or also text nodes. I'll add an addendum in the question regarding the difference. – zero298 Aug 20 '18 at 15:22

score 1 · Accepted Answer · answered Aug 20 '18 at 15:12

1- Store all lis in array instead of length

2- Iterate through them and check the number of children

Something like this

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>

JSmith · Answer 3 · 2018-08-20T15:24:40.797

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>

Same as parsing through an array use [indexNumber]

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

Hope that was the question

score 0 · Answer 4 · answered Aug 20 '18 at 15:11

0

try this:

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

answered Aug 20 '18 at 15:11

jcubic

61,973
54
229
402

How to get element who has more than one child?

4 Answers4