Question

我的问题更多地与为什么会发生这种情况有关，而不是知道如何解决它。

我想首先将<li>附加到div，然后将<a>附加到<li>。

我有以下jQuery代码：

$('.patches').empty();
for(i=0;i<patches.length;i++){
    $('.patches').append($('<li>', {
        id:'li'+ patches[i].name,
        class: 'list-group-item'
    }));
    $('#li'+patches[i].name).append($('<a>',{
        href:patches[i].downloadUrl,
        text:patches[i].name,
        id:'a'+patches[i].name
    }));
    $('#a'+patches[i].name).append('Version : '+patches[i].version+' Author : '+patches[i].author);
}

附加<li>，但<a>不是，为什么这不起作用？

编辑：我已按如下方式修改了代码，效果很好：

$('.patches').empty();
for(i=0;i<patches.length;i++){
    var listItem=$('<li>', {
        id:'li'+ patches[i].name,
        class: 'list-group-item'
    });
    $('.patches').append(listItem);
    var aItem=$('<a>',{
        href:patches[i].downloadUrl,
        text:patches[i].name,
        id:'a'+patches[i].name
    });
    listItem.append(aItem);
    listItem.append('<p>Version : '+patches[i].version+' Author : '+patches[i].author+'</p>');
}

此版本与前一版本几乎相同，我只是使用变量。我仍然想知道为什么以前版本的代码不起作用。有人可以解释一下吗？

Answer 1

您甚至在追加到DOM之前都在查询DOM。

直接附加到

for(i=0;i<patches.length;i++){
    $('.patches').append($('<li>', {
        id:'li'+ patches[i].name,
        class: 'list-group-item'
    }).append($('<a>',{
        href:patches[i].downloadUrl,
        text:patches[i].name,
        id:'a'+patches[i].name
    })));
    $('#a'+patches[i].name).append('Version : '+patches[i].version+' Author : '+patches[i].author);
}

Answer 2

您可以在li标记中创建一个链接元素并wrap，然后将其附加到列表中。

请参阅以下内容：

$(document).ready(function(){
  let patches = [
    {name: "test1", downloadUrl: "/url1", version: 1, author: "Alessandro"},
    {name: "test2", downloadUrl: "/url2", version: 2, author: "Alessandro"}];
  $('.patches').empty();
  for(i=0;i<patches.length;i++){
      let link = $('<a>',{
          href:patches[i].downloadUrl,
          text: 'Version : '+patches[i].version+' Author : '+patches[i].author,
          id:'a'+patches[i].name
      }).wrap("<li></li>").parent();
      $('.patches').append($(link, {
          id:'li'+ patches[i].name,
          class: 'list-group-item'
      }));
  }
});

$("#btnAdd").click(function(){
  $("#atest2").append(";\tSome new information");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAdd">Add something to second element</button>
<ol class="patches"/>

如果您想引用特定的链接元素，可以使用其ID，例如：

$("#atest2").append(";\tSome new information");

我希望它可以帮助你，再见。

Answer 3

这些元素是动态创建的。所以，你需要调用类似这样的东西

$(document).on('event', '.class-name', function(){
    // code
});

Answer 4

修改您的逻辑，首先将<a>标记添加到<li>，然后将<li>标记添加到<div> ...

如何通过JQuery附加到附加元素？

4 个答案: