Si8
Si8

Reputation: 9225

Get the size of the parent LI inside an UL?

How can I modify the below code so that I get only the parent li within the first ul and then with another variable get the sub li of the given sub ul?

	$(function () {
		var vULSize = $("ul li").size();
		console.log(vULSize);
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
		<li>First</li>
		<li>Second
			<ul>
				<li>Second Sub 1</li>
				<li>Second Sub 2</li>
			</ul>
		</li>
		<li>Third</li>
		<li>Third
			<ul>
				<li>Third Sub 1</li>
				<li>Third Sub 2</li>
			</ul>
		</li>
	</ul>

Fiddle: http://jsfiddle.net/0sp9pohr/

Upvotes: 0

Views: 81

Answers (2)

Anders
Anders

Reputation: 8577

First you need to wrap it all in something, say for instance a div with the id container. Then you can do something like this:

var vULSize = $("#container > ul > li").length;

The > selector gives you only the direct descendants.

If you want to count the number of list elements one level down, this will give you an array with the result:

var counts = $("#container > ul > li").map(function() {
    return $(this).find("li").length                                       
}).get();

As pointed out in comments, you should use .length instead of .size().

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You can ignore all li's that are descendants of an li like

$(function() {
  var vULSize = $("ul li:not(li li)").size();
  snippet.log(vULSize);
});
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>First</li>
  <li>Second
    <ul>
      <li>Second Sub 1</li>
      <li>Second Sub 2</li>
    </ul>
  </li>
  <li>Third</li>
  <li>Third
    <ul>
      <li>Third Sub 1</li>
      <li>Third Sub 2</li>
    </ul>
  </li>
</ul>

Upvotes: 2

Related Questions