Question

我如何计算<li></li>的总数？我尝试.length和.size但是我将它返回“2”（当4时），谢谢！

$(document).ready(function() {
  total_notif = $('#notifications li').length;
  //total_notif = $('.data_notifications li').size();
  alert("total :  " + total_notif);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="notifications" class="data_notifications">
  <ul class="menu">
    <li> <a href="http://www.vicolinker.net"> Vicolinker 1 </a> 
    </li>
    <li> <a href="http://www.vicolinker.net"> Vicolinker 2 </a> 
    </li>
  </ul>

  <ul class="menu">
    <li> <a href="http://www.vicolinker.net"> Vicolinker 1 </a> 
    </li>
    <li> <a href="http://www.vicolinker.net"> Vicolinker 2 </a> 
    </li>
  </ul>
</div>

- - - - - - - - - - - - - - - LONG VERSION --------------------------

JSON：

[{
    "module": "demo2",
    "id": 1,
    "icon": "fa fa-hdd",
    "text": "probando noti",
    "link": "www.google.es",
    "datum": "2016-04-04"
}, {
    "module": "demo2",
    "id": 2,
    "icon": "fa fa-happpy",
    "text": "holaa",
    "link": "www.bing.es",
    "datum": "2016-06-12"
}]

JS：

<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function(){

        var html = "";
        var total_notifications = 0;
        var json_urls =['./modules/demo2/_notifications.php',
                        './modules/hdd/_notifications.php'];

        for (var i=0; i<json_urls.length; i++){ 

            GetJSONArray(json_urls[i]);
            total_notifications++;
        }

        function GetJSONArray(url){

           $.getJSON(url,function(data){
                //console.log(data);
                var items = [];

                $.each( data, function( key, val ) {

                    items.push('<li> <a href="'+ val.link +'"> <i class="'+ val.icon +' text-aqua"></i>'+ val.text +' </a> </li>' );
                });
              //console.log("HTML OK :    " + items);
            $( "<ul/>", {
                        "class": "menu",
                        html: items.join( "" )
                      }).appendTo( ".datos_notificaciones" );
            });
        }  


     console.log("total: " +total_notifications);

    total_notif = $('#cuenta li').length;
    //total_notif2 = $('.datos_notificaciones li').size();
    total_notif2 = $(".datos_notificaciones ul").children('li').length;
     console.log("total directo :  " + total_notif);
     console.log("total directo2 :  " + total_notif2);
});//]]> 

</script>

HTML：

<div id="cuenta" class="datos_notificaciones"></div>

结束HTML：

    <div id="cuenta" class="datos_notificaciones">
    <ul class="menu">
        <li> <a href="www.google.es"> <i class="fa fa-users text-aqua"></i>probando noti </a> </li>
        <li> <a href="www.bing.es"> <i class="fa fa-users text-aqua"></i>holaa </a> </li>
    </ul>

    <ul class="menu">
        <li> <a href="www.google.es"> <i class="fa fa-users text-aqua"></i>hdd nicht da </a> </li>
        <li> <a href="www.bing.es"> <i class="fa fa-users text-aqua"></i>adios </a> </li>
    </ul>
</div>

它现在有点长但是相同.....这里是错误发生的地方，不计算<li>的总数......

Answer 1

total_notif = $('#notifications li').length;
console.log("total :  " + total_notif);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notifications" class="data_notifications">
  <ul class="menu">
    <li> <a href="http://www.vicolinker.net"> Vicolinker 1 </a> 
    </li>
    <li> <a href="http://www.vicolinker.net"> Vicolinker 2 </a> 
    </li>
  </ul>

  <ul class="menu">
    <li> <a href="http://www.vicolinker.net"> Vicolinker 1 </a> 
    </li>
    <li> <a href="http://www.vicolinker.net"> Vicolinker 2 </a> 
    </li>
  </ul>
</div>

如果你想获得所有ul的所有li，只需使用

$('ul li').length

Answer 2

您可以将.length与descendant-selector

一起使用

$("#notifications li").length

您也可以使用children，然后就是这样：

$("#notifications ul").children('li').length

仅使用javascript

document.querySelectorAll('#notifications li').length

Answer 3

使用.length可以获得jQuery对象中的元素数量。

var liTotal = $('li').length;
console.log('total :  ' + liTotal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notifications" class="data_notifications">
  <ul class="menu">
    <li> <a href="http://www.vicolinker.net"> Vicolinker 1 </a> 
    </li>
    <li> <a href="http://www.vicolinker.net"> Vicolinker 2 </a> 
    </li>
  </ul>

  <ul class="menu">
    <li> <a href="http://www.vicolinker.net"> Vicolinker 1 </a> 
    </li>
    <li> <a href="http://www.vicolinker.net"> Vicolinker 2 </a> 
    </li>
  </ul>
</div>

Jquery .length .size在DIV中计数

- - - - - - - - - - - - - - - LONG VERSION --------------------------

3 个答案: