2016-08-23 4 views
0

Я хотел бы добавить li в ul с помощью кнопки. Затем, когда добавляется каждый новый элемент списка, отображается количество элементов списка. Я могу добавить li, но не знаю, куда идти оттуда.jQuery Обнаружение при добавлении элемента списка

Любые указатели приветствуются.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>List counter</title> 
</head> 
<body> 
    <ul class="myUL"> 
    </ul> 
    <button class="myBUTTON">Add List Item</button> 
    <p>List count>#</p> 

    <script src="js/jquery-1.12.1.min.js"></script> 
    <script> 
     $('button.myBUTTON').on('click', function(eval) { 
      eval.preventDefault(); 
     $('ul.myUL').append('<li>Item 1</li>'); 
     }); 
    </script> 
</body> 
</html> 

ответ

1

Вы можете просто использовать length, чтобы получить количество li и установить его в click слушателя.

$('.myBUTTON').on('click', function() { 
 
    // get the length before and directly increment by one to set it to the elements 
 
    var length = ++$('.myUL li').length; 
 

 
    $('.myUL').append('<li>Item ' + length + '</li>'); 
 
    $('p').text('List count ' + length); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<ul class="myUL"></ul> 
 
<button class="myBUTTON">Add List Item</button> 
 
<p>List count 0</p>

+0

Благодаря eisbehr, что помогает –

+0

Добро пожаловать, @LaurenceL! – eisbehr

Смежные вопросы