javascript - jQuery, count number of dynamicly added <li> in <ul> - Stack Overflow

admin管理员组

文章数量:1431726

I have a list of LI in a UL, they are all dynamically added via jQuery. I am trying to alert the number of LI in this list. Right now I can only get it to alert 0. I think it is because its trying to count the original number on load? here is my code and fiddle:

<ul id="list"> 
    <li>original</li>
</ul>

var familly = []
familly.push('<li>1</li>');
familly.push('<li>2</li>');
familly.push('<li>3</li>');
familly.push('<li>4</li>');

$('#list').prepend(familly);

$('#list').on('click', 'li', function(ev){ 
    var howMany = $('#list').length; 
    alert(howMany);
});

How can I get it to alert the total number of LI after they are dynamically added?

I have a list of LI in a UL, they are all dynamically added via jQuery. I am trying to alert the number of LI in this list. Right now I can only get it to alert 0. I think it is because its trying to count the original number on load? here is my code and fiddle:

https://jsfiddle/ts7Lwbfs/1

<ul id="list"> 
    <li>original</li>
</ul>

var familly = []
familly.push('<li>1</li>');
familly.push('<li>2</li>');
familly.push('<li>3</li>');
familly.push('<li>4</li>');

$('#list').prepend(familly);

$('#list').on('click', 'li', function(ev){ 
    var howMany = $('#list').length; 
    alert(howMany);
});

How can I get it to alert the total number of LI after they are dynamically added?

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 22, 2015 at 23:51 nick asked Dec 22, 2015 at 23:49 nicknick 1,25633 gold badges2121 silver badges4141 bronze badges 3

• The ID doesn't match the list name of "list"... $('#list').length – MaxOvrdrv Commented Dec 22, 2015 at 23:51
• Sorry I edited, now its out puting 1. the original number of li in that list – nick Commented Dec 22, 2015 at 23:52
• No, it's outputtting 1, the number of #list elements – adeneo Commented Dec 22, 2015 at 23:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The selector $('#bet_slip') matches an element with the ID bet_slip, and as ID's are unique jQuery doesn't expect there to be more than one, and as none of your elements have that ID, you get zero?

Seems like what you want is to count the number of LI's in the #list list

$('#list').on('click', 'li', function(ev){ 
    var howMany = $('#list li').length; 
    alert(howMany);
});

FIDDLE

Note that this counts all LI's currently present, including the one that was there originally.

If you are trying to find only the count of newly added li ( excluding the original ) , you can filter the li and exclude the first one using :not:first expression.

$('#list').on('click', function(ev){ 
    var howMany = $(this).find('li:not(:first)').length; 
  alert(howMany);
});

https://jsfiddle/DinoMyte/ts7Lwbfs/4/

You can count the total number of list items this way:

$('#list').on('click', function(){ 
    var howMany = $('#list li').length; 
  alert(howMany);
});

To get the number of added list items, first capture the count of original list items before you add new ones, and then subtract the total in your function from the original count.

var originalCnt = $('#list li').length;
$('#list').prepend(familly);

$('#list').on('click', function(){ 
    var howMany = $('#list li').length - originalCnt; 
  alert(howMany);
});

Fiddle Demo

本文标签： JavaScriptJQuerycount number of dynamicly added ltligt in ltulgtStack Overflow