Как посчитать количество <li>от конкретного <ul>?

Question

Я попытался сосчитать весь список добавлений li определенного ul, но он подсчитает 0, когда я его утешу.

Я пытаюсь поставить этот код:

count = $('#notif-list').children("li").length;
console.log(count);

и вот мой полный код:

$(document).ready(function() {    

notif();

count = $('#notif-list').children("li").length;
console.log(count);
$('#countnotif').append('Notifications'+ '<span>'+ count     +'</span>');


var socket = io('http://www.iaccs-admin-console.test' + ':8080');
socket.on("message", function(message){

    notif()

});

Результат должен быть таким: если есть четыре li, то count = 4.

Это код, гдеЯ добавляю список.

function notif(){

    $.ajax({
        url: `/iaccs-hook-notifications`,
        method: 'GET',
        success: function(data){

            console.log(data);          


            if (data.length > 0) {

                $('#btn-notif').addClass('js-has-new-notification'); 


                $('#notif-list').append(`

                    <li>

                        <div class="an-info-single unread">
                            <a href="{{url('iaccs-hook-list')}}">
                                <span class="icon-container important">
                                    <i class="icon-setting"></i>
                                </span>
                                <div class="info-content">
                                    <h5 class="user-name">Update Client</h5>
                                    <p class="content"><i class="icon-clock"></i> ${data[0].created_at}</p>
                                </div>
                            </a>
                        </div>

                    </li>
                `);

            }

        },
        error: function(err){
            swal('Error!','Please report this issue.', 'error');
        }
    });
}

Answer 1

сэр @Rup здесь функция добавления списка ..

function notif(){

    $.ajax({
        url: `/iaccs-hook-notifications`,
        method: 'GET',
        success: function(data){

            console.log(data);


            if (data.length > 0) {

                $('#btn-notif').addClass('js-has-new-notification'); 

                $('#notif-list').append(`

                    <li>

                        <div class="an-info-single unread">
                            <a href="{{url('iaccs-hook-list')}}">
                                <span class="icon-container important">
                                    <i class="icon-setting"></i>
                                </span>
                                <div class="info-content">
                                    <h5 class="user-name">Update Client</h5>
                                    <p class="content"><i class="icon-clock"></i> ${data[0].created_at}</p>
                                </div>
                            </a>
                        </div>

                    </li>
                `);
            }



        },
        error: function(err){
            swal('Error!','Please report this issue.', 'error');
        }
    });
}

Answer 2

Пожалуйста, попробуйте это.Это на Java, попробуйте использовать эту концепцию.

// Получить элементы в списке

    List<WebElement> l=driver.findElements(By.tagName("li"));

"l" - это список всех элементов с именем тега как "li".

// печать отсчета

    System.out.println(a.size());

Answer 3

Вот, пожалуйста!

console.log($('.spacial-list-item').children('li').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="spacial-list-item">
<li class="linked">
    <span class="spacial-list-desc">App Testing Project</span>
</li>
<li class="">
    <span class="spacial-list-desc">Latest Test Project</span>
</li>
<li class="">
    <span class="spacial-list-desc">Latest Test Project</span>
</li>
<li class="">
    <span class="spacial-list-desc">New Test Project</span>
</li>    <li class="">
    <span class="spacial-list-desc">QA - Test project</span>
</li>
</ul>