0

在这里，我想计算<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>

我怎样才能做到这一点？

4

9 回答 9

0

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

function countLi()
{
    var lis = document.body.innerHTML.match(<li>);
    return lis ? lis.length : 0;
}
于 2013-10-08T10:17:55.650 回答
0 
$('li.header').html('('+$('span.event').length+') items)');
于 2013-10-08T10:19:37.843 回答
0 
  <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>

或者

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

<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>
于 2013-10-08T10:22:02.840 回答
0

你的问题的上下文不清楚。使用 jQuery，下面将把 'li' 的数量放入ul.notif.

$(document).ready(function(){
    $('span.notification').html($('ul.notif').find('li').length);
});
于 2013-10-08T10:22:12.430 回答
0

您可以使用.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');
于 2013-10-08T10:22:25.887 回答
0

您可以为此使用长度：

$('ul li').length;

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

jsFiddle

于 2013-10-08T10:23:01.703 回答
0

这可能会帮助你...... :)

no_of_li = $('li').size();
$('.header').html('<strong>Notifications</strong> ('+no_of_li+') items');
于 2013-10-08T10:23:46.020 回答
0

Length会给你礼物的li数量

$('.notif li').length

检查小提琴：小提琴

于 2013-10-08T10:28:25.530 回答
-1

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

 $('li').length
于 2013-10-08T10:18:05.183 回答