Question

我试图在ul列表中计算li，但不知道为什么不计算

我的HTML代码：

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

我的Jquery功能：

 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 + "");
 }

即使每个功能都没有执行：

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

我不知道它是如何运作的。即使我使用正确的选择器。请帮忙。我已经包含了jquery函数1.12.2

Answer 1

您的代码效果很好。您可以从下面的工作

<!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>

Answer 2

只有在加载文档时才需要执行代码。这个结构将做到这一点：

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

现在，您的代码有几个问题：

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

此行显示在循环中，但它始终会返回第一个li元素的文本。

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

这是错误的，你使用LI的文本内容（见上文）就好像它是一个元素（选择器）。那样不行。

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

这里注入无效的HTML：它有几个未关闭的标签。但更重要的是：您在每次迭代中覆盖HTML，因此只有最后一次迭代才能确定HTML是#nitspopupmenu。

这是建议的代码，虽然我不知道你真正想要放在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>");

});

li的总数不包括在ul下

2 个答案: