Get number of in any using javascript

I have a code in which I need to find the number of li tags, not the nested ones.

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

Doing

document.querySelector('.ulStart').getElementsByTagName('li')

Gives me 4 <li>, which is not what I want, I want the number of li tags present in ulStart. Let me know if there is any way to do so. No jQuery, pure javascript.

edited Nov 11 at 18:56

qiAlex

2,0261724

asked Nov 11 at 17:53

Michael Philips

554521

1

You may use document.querySelector('.ulStart').children.length
– enxaneta
Nov 11 at 18:01

add a comment |

I have a code in which I need to find the number of li tags, not the nested ones.

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

Doing

document.querySelector('.ulStart').getElementsByTagName('li')

Gives me 4 <li>, which is not what I want, I want the number of li tags present in ulStart. Let me know if there is any way to do so. No jQuery, pure javascript.

edited Nov 11 at 18:56

qiAlex

2,0261724

asked Nov 11 at 17:53

Michael Philips

554521

1

You may use document.querySelector('.ulStart').children.length
– enxaneta
Nov 11 at 18:01

add a comment |

I have a code in which I need to find the number of li tags, not the nested ones.

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

Doing

document.querySelector('.ulStart').getElementsByTagName('li')

Gives me 4 <li>, which is not what I want, I want the number of li tags present in ulStart. Let me know if there is any way to do so. No jQuery, pure javascript.

edited Nov 11 at 18:56

qiAlex

2,0261724

asked Nov 11 at 17:53

Michael Philips

554521

I have a code in which I need to find the number of li tags, not the nested ones.

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

Doing

document.querySelector('.ulStart').getElementsByTagName('li')

Gives me 4 <li>, which is not what I want, I want the number of li tags present in ulStart. Let me know if there is any way to do so. No jQuery, pure javascript.

javascript html

edited Nov 11 at 18:56

qiAlex

2,0261724

asked Nov 11 at 17:53

Michael Philips

554521

edited Nov 11 at 18:56

qiAlex

2,0261724

asked Nov 11 at 17:53

Michael Philips

554521

edited Nov 11 at 18:56

qiAlex

2,0261724

edited Nov 11 at 18:56

qiAlex

2,0261724

edited Nov 11 at 18:56

qiAlex

2,0261724

asked Nov 11 at 17:53

Michael Philips

554521

asked Nov 11 at 17:53

Michael Philips

554521

asked Nov 11 at 17:53

Michael Philips

554521

1

You may use document.querySelector('.ulStart').children.length
– enxaneta
Nov 11 at 18:01

add a comment |

1

You may use document.querySelector('.ulStart').children.length
– enxaneta
Nov 11 at 18:01

You may use document.querySelector('.ulStart').children.length
– enxaneta
Nov 11 at 18:01

add a comment |

3 Answers
3

active

oldest

votes

let count = document.querySelectorAll("ul.ulStart > li").length;

console.log(count);

<ul class="ulStart">

  <li>

    <ul class="ulNested">

      <li></li>

      <li></li>

    </ul>

  </li>

  <li></li>

</ul>

Use the > (direct child) CSS selector. See MDN - Child selectors.

answered Nov 11 at 17:57

Aurel Bílý

4,51211328

add a comment |

console.log(document.querySelectorAll('.ulStart > li').length);

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

answered Nov 11 at 17:57

Artyom Amiryan

1,815113

add a comment |

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

Try use the following query selector:

console.log(document.querySelectorAll('.ulStart > li').length);

Results in:

HTMLCollection(2) [li, li]

edited Nov 11 at 18:17

answered Nov 11 at 18:08

Maysam Mok

412

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251540%2fget-number-of-li-in-any-ul-using-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

let count = document.querySelectorAll("ul.ulStart > li").length;

console.log(count);

<ul class="ulStart">

  <li>

    <ul class="ulNested">

      <li></li>

      <li></li>

    </ul>

  </li>

  <li></li>

</ul>

Use the > (direct child) CSS selector. See MDN - Child selectors.

answered Nov 11 at 17:57

Aurel Bílý

4,51211328

add a comment |

let count = document.querySelectorAll("ul.ulStart > li").length;

console.log(count);

<ul class="ulStart">

  <li>

    <ul class="ulNested">

      <li></li>

      <li></li>

    </ul>

  </li>

  <li></li>

</ul>

Use the > (direct child) CSS selector. See MDN - Child selectors.

answered Nov 11 at 17:57

Aurel Bílý

4,51211328

add a comment |

let count = document.querySelectorAll("ul.ulStart > li").length;

console.log(count);

<ul class="ulStart">

  <li>

    <ul class="ulNested">

      <li></li>

      <li></li>

    </ul>

  </li>

  <li></li>

</ul>

Use the > (direct child) CSS selector. See MDN - Child selectors.

answered Nov 11 at 17:57

Aurel Bílý

4,51211328

let count = document.querySelectorAll("ul.ulStart > li").length;

console.log(count);

<ul class="ulStart">

  <li>

    <ul class="ulNested">

      <li></li>

      <li></li>

    </ul>

  </li>

  <li></li>

</ul>

Use the > (direct child) CSS selector. See MDN - Child selectors.

let count = document.querySelectorAll("ul.ulStart > li").length;

console.log(count);

<ul class="ulStart">

  <li>

    <ul class="ulNested">

      <li></li>

      <li></li>

    </ul>

  </li>

  <li></li>

</ul>

let count = document.querySelectorAll("ul.ulStart > li").length;

console.log(count);

<ul class="ulStart">

  <li>

    <ul class="ulNested">

      <li></li>

      <li></li>

    </ul>

  </li>

  <li></li>

</ul>

answered Nov 11 at 17:57

Aurel Bílý

4,51211328

answered Nov 11 at 17:57

Aurel Bílý

4,51211328

answered Nov 11 at 17:57

Aurel Bílý

4,51211328

answered Nov 11 at 17:57

Aurel Bílý

4,51211328

add a comment |

console.log(document.querySelectorAll('.ulStart > li').length);

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

answered Nov 11 at 17:57

Artyom Amiryan

1,815113

add a comment |

console.log(document.querySelectorAll('.ulStart > li').length);

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

answered Nov 11 at 17:57

Artyom Amiryan

1,815113

add a comment |

console.log(document.querySelectorAll('.ulStart > li').length);

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

answered Nov 11 at 17:57

Artyom Amiryan

1,815113

console.log(document.querySelectorAll('.ulStart > li').length);

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

console.log(document.querySelectorAll('.ulStart > li').length);

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

console.log(document.querySelectorAll('.ulStart > li').length);

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

answered Nov 11 at 17:57

Artyom Amiryan

1,815113

answered Nov 11 at 17:57

Artyom Amiryan

1,815113

answered Nov 11 at 17:57

Artyom Amiryan

1,815113

answered Nov 11 at 17:57

Artyom Amiryan

1,815113

add a comment |

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

Try use the following query selector:

console.log(document.querySelectorAll('.ulStart > li').length);

Results in:

HTMLCollection(2) [li, li]

edited Nov 11 at 18:17

answered Nov 11 at 18:08

Maysam Mok

412

add a comment |

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

Try use the following query selector:

console.log(document.querySelectorAll('.ulStart > li').length);

Results in:

HTMLCollection(2) [li, li]

edited Nov 11 at 18:17

answered Nov 11 at 18:08

Maysam Mok

412

add a comment |

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

Try use the following query selector:

console.log(document.querySelectorAll('.ulStart > li').length);

Results in:

HTMLCollection(2) [li, li]

edited Nov 11 at 18:17

answered Nov 11 at 18:08

Maysam Mok

412

<ul class="ulStart">

   <li>

      <ul class="ulNested">

         <li></li>

         <li></li>

      </ul>

  </li>

  <li></li>

</ul>

Try use the following query selector:

console.log(document.querySelectorAll('.ulStart > li').length);

Results in:

HTMLCollection(2) [li, li]

edited Nov 11 at 18:17

answered Nov 11 at 18:08

Maysam Mok

412

edited Nov 11 at 18:17

answered Nov 11 at 18:08

Maysam Mok

412

answered Nov 11 at 18:08

Maysam Mok

412

answered Nov 11 at 18:08

Maysam Mok

412

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu