如何使用jQuery添加具有不同值的不同元素

Question

我正在尝试制作一个菜单，在这里我可以选择我想看的元素和其他我不想看的元素，而这项工作的一部分就是使用jQuery添加具有不同值的元素。 这是代码示例。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle glyphicon glyphicon-option-vertical" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class=""></span></a>
        <ul class="dropdown-menu">
          <li><a href="#" id="editA">Edit<span id="editSpan" class=""></span></a></li>
          <li role="separator" class="divider"></li>
          <li id="saveLi"><a href="#" id="saveA">Save<span id ="saveSpan" class=""></span></a></li>
       </ul>
     </li>
  </ul>   
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class=""></span></a>
        <ul class="dropdown-menu">
          <li class="items"><a href="#">Item 1 </a></li>
       </ul>
     </li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class=""></span></a>
        <ul class="dropdown-menu">
          <li class="items"><a href="#">Item 1 </a></li>
          <li> <a href=""></a></li>
       </ul>
     </li>
  </ul>
</div><!-- /.navbar-collapse -->

$(document).ready(function(){
    //Variables que usaremos.
    var elementMenu = 5;
    var elementDist = 0;
    var elemento = "";

    $("input").remove();
    //Mostrar Glyphicon en el menu de cambiar cambios
    $("#editA").hover(function(){
        $("#editSpan").addClass("glyphicon glyphicon-pencil");
    }, function(){
        $("#editSpan").removeClass("glyphicon glyphicon-pencil");
    });
    $("#saveLi").hover(function(){
        $("#saveSpan").addClass("glyphicon glyphicon-floppy-disk");
    }, function(){
        $("#saveSpan").removeClass("glyphicon glyphicon-floppy-disk");
    });
    //Termina el codigo

    //Código donde sabremos si se ha dado click
    //sobre el elemento editar.
    $("#editA").click(function(){
        for (var i = 1; i < 5; i++) {
            $("#editA").click(function(){
                    $(".dropdown-menu").append('<li><a href="">'+i+'items</a></li>');
            });
        };
    });
    //Código donde sabre lo contrario.
    $("#saveA").click(function(){
        $("input").remove();
    });

    $("saveA").click(function(){
    });
});

Answer 1

我解决了这段代码中的问题：

$("#editA").click(function(){
        for (var i = 1; i < 5; i++) {
            $("#editA").click(function(){
                    $(".dropdown-menu").append('<li><a href="">'+i+'items</a></li>');
            });
        };
    });

我只需要

$("#editA").click(function(){
        for (i = 1; i < 5; i++) {
            $(".dropdown-menu").append('<li><a href="">'+i+'items</a></li>');
        };
    });