I have a ajax code which returns the list items as

<li>one</li>
<li>Two</li>

Each time it will return different number of <li>'s. I want to check the number of <li> it returns. How to check it using JavaScript.

I have a ajax code which returns the list items as

<li>one</li>
<li>Two</li>

Each time it will return different number of <li>'s. I want to check the number of <li> it returns. How to check it using JavaScript.

• javascript
• jquery
• html

• Are you trying to count the line item tags without attaching the returned HTML to the DOM? if you are, your easiest solution will be jQuery based, as most DOM methods ( ie. getElementsByTagNmae ) don't work on document fragments. – Erik Commented Sep 13, 2010 at 5:33
• 1 Yes I am trying to count <li>'s which ajax retuns, before adding it to DOM – Rajasekar Commented Sep 13, 2010 at 5:35
• 3 Is using jQuery to do it out of the question? If not, it would be as simple as $(returnedHTML).find('li').length – Erik Commented Sep 13, 2010 at 5:36
• @ERIK Great Works Perfectly!. Please add this ment as answer. I will tick it – Rajasekar Commented Sep 13, 2010 at 5:39

6 Answers 6

Here ya go:

$(returnedHTML).find('li').length

This takes the returnedHTML and only counts the line items within it.

ajaxHtml.split('<li').length - 1 for counting the raw ajax html.

Or, element.getElementsByTagName("li").length (with element being a parent container for the LI tags.)

Have you tried:

var elements = document.getElementsByTagName('li');
var count = elements.length;

If you need to look within a specific list, jQuery makes it simple:

$("DIV_NAME > ul > li").length

If the list you want to test is ing in as a string from an AJAX request, you'll just treat it like a string, instead of a set of DOM objects.

Take a look at this bit of code.

var input = "<li>one</li><li>Two</li>";
var pattern = /<li>/gi;

var match;
var count = 0;
while(match = pattern.exec(input)) {
    count++;
}

alert("There are "+count+" occurences of <li> in the input string.");

What I'm doing here is using an regular expression to find occurrences of <li> case insensitively (just to be certain) and globally (treat the entire string as a single block of text to be searched).

FIXED: Some people thought that I am counting LIs on link click event and also not counting it from html response. Here is the edited answer.

If you got html response something like this:

myhtml.html:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Then your jQuery part may be look like this:

$.get('myhtml.html', function(data) {
   alert( $(data).find("li").length ); // 3
});