Question

在这里，我想计算<li>代码的数量，并显示计数的数字，而不是3。

<ul class="nav pull-right usernav">

    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
        class="icon16 icomoon-icon-bell"></span><span class="notification">3</span> </a>
        <ul class="dropdown-menu">
            <li class="menu">
                <ul class="notif">
                    <li class="header"><strong>Notifications</strong> (3) items</li>

                    <li><a href="/Task_Status/get_Employee_Dialog"><span class="icon"><span class="btn_Employee_Dialog_Search select-div-icon"></span></span>
                        <span class="event">1 employee submited work</span> </a></li>

                    <li><a href="#"><span class="icon"><span class="icon16 icomoon-icon-user-2"></span></span>
                        <span class="event">1 User is registred</span> </a></li>
                    <li><a href="#"><span class="icon"><span class="icon16 icomoon-icon-comments-4"></span>
                        </span><span class="event">Jony add 1 comment</span> </a></li>
                    <li><a href="#"><span class="icon"><span class="icon16 icomoon-icon-new"></span></span>
                        <span class="event">admin Julia added post</span> </a></li>
                    <li class="view-all"><a href="#">View all notifications <span class="icon16  icomoon-icon-arrow-right-7"></span></a></li>
                </ul>
            </li>
        </ul>
    </li>

我该怎么做？

Answer 1

你可以使用这样的javascript函数：

function countLi()
{
    var lis = document.body.innerHTML.match(<li>);
    return lis ? lis.length : 0;
}

Answer 2

$('li.header').html('('+$('span.event').length+') items)');

Answer 3

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        var numItems = $('.notif LI').length-2; // -2 For First & Last Li ...
        $('span.notification').html(numItems);
    });
  </script>

OR

如果你想计算通知的数量，你可以使用span也像这样waay

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        var numItems = $('.icon').length
         $('span.notification').html(numItems);
    });
  </script>

Answer 4

您的问题背景不明确。使用jQuery，下面将把'li'的数量放在ul.notif中。

$(document).ready(function(){
    $('span.notification').html($('ul.notif').find('li').length);
});

Answer 5

您可以使用.html()方法设置值：

$('.notif .header').html(function() {
   var count = $(this).siblings('li').length - 1;
   return '<strong>Notifications</strong> ('+count+') items';
});

http://jsfiddle.net/kyNsr/

编辑：

var count = $('.notif li').length - 2;
$('.notification').text(count);
$('.notif .header').html('<strong>Notifications</strong> ('+count+') items');

Answer 6

您可以使用长度：

$('ul li').length;

现在，如果您只想计算特定ul中的li元素，则应使用类或ID定义该特定ul。

<强> jsFiddle

Answer 7

这可能对你有帮助......：）

no_of_li = $('li').size();
$('.header').html('<strong>Notifications</strong> ('+no_of_li+') items');

Answer 8

Length将为您提供li目前

的统计数字

$('.notif li').length

检查小提琴：Fiddle

Answer 9

您可以通过jquery获取所有li对象：

 $('li').length

如何计算<li>标签的数量并显示它？</li>

9 个答案: