CODEWITHSUNDEEP
jquery
Nitish Kumar
Nitish Kumar

Reputation: 6276

Total number of li is not counting under ul

I'm trying to count li in ul list, but don't know why its not counting

My html code:

<ul class="nav navbar-nav navbar-right count" id="nitsmenu" data-nitspagelabel="1">
                    <li id="li-1" class="scroll active" data-menusort="1"><a href="#navigation">Home</a></li>
                    <li id="li-2" class="scroll" data-menusort="2"><a href="#aboutus">About Us</a></li>
                    <li id="li-3" class="scroll" data-menusort="3"><a href="#services">Services</a></li>
                    <li id="li-4" class="scroll" data-menusort="4"><a href="#ourteam">Our Team</a></li>
                    <li id="li-5" class="scroll" data-menusort="5"><a href="#portfolio">Portfolio</a></li>
                    <li id="li-6" class="scroll" data-menusort="6"><a href="#clients">Clients</a></li>
                    <li id="li-7" class="scroll" data-menusort="7"><a href="#blog">Blog</a></li>
                    <li id="li-8" class="scroll" data-menusort="8"><a href="#contact">Contact</a></li>
                </ul>

My Jquery function:

 var licount = $("ul#nitsmenu > li").length;
 console.log(licount);
 for (i = 0; i < licount; i++) {
    var lielem = $("#nitsmenu li").text();
    var element = $(lielem).text();
    $("#nitspopupmenu").html("<div class='form-group'><div class='pagesmenu selected'><span><i class ='fa fa-bars'></i>" + lielem + "");
 }

Even each function is not executing:

$("#nitsmenu li").each(function (i, lielem)

I don't know how it works. Even I'm using correct selectors. Please help. I've included the jquery function 1.12.2

Upvotes: 0

Views: 48

Answers (2)

trincot
trincot

Reputation: 350232

You need to execute your code only when the document has loaded. This construct will do that:

$(function () {
    // your code comes here
});

Now, your code has several issues:

    var lielem = $("#nitsmenu li").text();

This line appears in a loop, yet it will always return the text of the first li element.

    var element = $(lielem).text();

This is wrong, you use the LI's text content (see above) as if it is an element (selector). That will not work. 

    $("#nitspopupmenu").html("<div class='form-group'><div class='pagesmenu selected'><span><i class ='fa fa-bars'></i>" + lielem + "");

Here you inject HTML that is not valid: it has several unclosed tags. But more importantly: you overwrite the HTML in each iteration, and so only the last iteration will determine which the HTML is of #nitspopupmenu.

Here is suggested code, although I don't know what you actually wanted to put in nitspopupmenu:

$(function () {
    var html = '';
    $("ul#nitsmenu > li").each(function () {
        // 'this' refers to current LI element
        var txt = $(this).text();
        // collect HTML 
        html += "<div class='pagesmenu selected'><span><i class ='fa fa-bars'></i>" 
                 + txt + "</span></div>";
    });
    // Put HTML only once:
    $("#nitspopupmenu").html("<div class='form-group'>" + html + "</div>");

});

Upvotes: 0

Gerard
Gerard

Reputation: 15786

Your code works well. You can work from the below

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<ul class="nav navbar-nav navbar-right count" id="nitsmenu" data-nitspagelabel="1">
<li id="li-1" class="scroll active" data-menusort="1"><a href="#navigation">Home</a></li>
<li id="li-2" class="scroll" data-menusort="2"><a href="#aboutus">About Us</a></li>
<li id="li-3" class="scroll" data-menusort="3"><a href="#services">Services</a></li>
<li id="li-4" class="scroll" data-menusort="4"><a href="#ourteam">Our Team</a></li>
<li id="li-5" class="scroll" data-menusort="5"><a href="#portfolio">Portfolio</a></li>
<li id="li-6" class="scroll" data-menusort="6"><a href="#clients">Clients</a></li>
<li id="li-7" class="scroll" data-menusort="7"><a href="#blog">Blog</a></li>
<li id="li-8" class="scroll" data-menusort="8"><a href="#contact">Contact</a></li>
</ul>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> 
<script type="text/javascript">
  $(function() {
    alert($("#nitsmenu li").length);
  });
</script>
</body>
</html>

Upvotes: 1

Related Questions