How to count the number of listitems in an asp.bulletedlist with JavaScript

Question

Hi

I have an asp:bulletedlist control, which sits inside a div tag, and I need to count the number of list items inside the control. Searching the internet, and noting the fact the html given back by the items is a list i.e. <li>, I thought I could use an example of:

var listcontrol = document.getElementById('BulletedList1');
var countItems = listcontrol.getElementByTagName('li').length;

However, when I do this, it throws and error saying that no object exists for this control.

So, my problem is, and because I must do this clientside because I want to use this to set the height of the div tag, is how do you count the number of items inside a asp:bulletedlist control with javascript?

Answer 1

You can't use document.getElementById like you are using it because the actual ID for an Asp.Net control when rendered is different than what you set for the ID on the control. View the source of your page and you will see what the actual ID is. You can then use that if you want and this code should work, but it would break if you ever moved the bulletedlist control, since the hierarchy would change.

Another way to do this would be to use jQuery. In your example, you could do this:

$('[id$=BulletedList1]').children('li').size()

This would select the element that ends with 'BulletedList1', gets the li children, and then returns the size of the collection.