Question

我在jquery中附加了一个问题

当我编写像

这样的代码时

<script>
  $(document).ready(function(){
    for(var a=0;a<5;a++){
          var u=$("#nav").append("<li >a_"+a);
               u.append("<ul>");
                   for(var b=0;b<5;b++){
                       u.append("<li>b_"+b+"</li>");
                   }
                u.append("</ul>")

          $("#nav").append("</li>")
     }
    });

 </script>
  <div class="section-tree">
  <ul id="nav"></ul>         </div>

输出如：

不是我想要的

我想要的是：

  <ul>

   <li> 
    a_0
      <ul>
         <li>b_1</li>
         <li>b_2</li>
         <li>b_3</li>
         <li>b_4</li>
         <li>b_5</li>
      </ul>
   </li>

   <li> 
   a_1
      <ul>
        <li>b_1</li>
        <li>b_2</li>
        <li>b_3</li>
        <li>b_4</li>
        <li>b_5</li>
      </ul>
  </li>
        ...
</ul>

为什么不对？

hellowworld hellowworld hellowworld hellowworld

Answer 1

首先将其连接到变量而不是使用.append()，请参阅下面的代码段以获取更多信息。

＆＃13;

$(document).ready(function() {
  var data = "";
  for (var a = 0; a < 5; a++) {
    data += "<li >a_" + a;
    data += "<ul>";
    for (var b = 0; b < 5; b++) {
      data += "<li>b_" + b + "</li>";
    }
    data += "</ul></li>";
  }
  $("#nav").append(data)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>


</script>
<div class="section-tree">
  <ul id="nav"></ul>
</div>

＆＃13;

Answer 2

$(document).ready(function(){
      var finalUiLi="";
      for(var a=0;a<5;a++){
          finalUiLi+="<li>a_"+a;
            finalUiLi+="<ul>";
                for(var b=0;b<5;b++){
                    finalUiLi+="<li>b_"+b +"</li>";
                }
            finalUiLi+="</ul>";   
          finalUiLi+="</li>";
      }
     $("#nav").append(finalUiLi);
    });

请尝试这种方式它会起作用。下面是输出的屏幕截图。

Answer 3

.append()附加完整元素，您应该创建DOM元素然后追加它。这是一个例子

使用

＆＃13;

$(document).ready(function() {
  for (var a = 0; a < 5; a++) {
    //Create LI elementFromPoint
    var li = $("<li >a_" + a + "</li>");

    //Create Sub UL
    var u = $("<ul>");
    for (var b = 0; b < 5; b++) {
      u.append("<li>b_" + b + "</li>");
    }

    //Append Sub UL ti LI
    li.append(u);

    //Append li
    $("#nav").append(li)
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-tree">
  <ul id="nav"></ul>
</div>

＆＃13;

为什么apprend（“<ul> <li>”）如此奇怪

为什么不对？

3 个答案: