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

您在这里！

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>

Answer 2

@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 3

请尝试这个。这是Java语言，请尝试使用此概念。

//获取列表中的元素

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

“ l”是标记名称为“ li”的所有元素的列表。

// a的打印计数

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

如何计算特定<ul>中<li>的数量？

3 个答案: