comment ajouter la liste en utilisant jquery

Question

Fondamentalement, j'essaie d'ajouter une liste en utilisant jquery. Chaque élément de cette liste est connecté à un lien différent. C'est ce que j'ai fait

for (i=0; i <data.length ; i++){ 

     var a = $('<a />'); 
     a.attr('href','https://example.com/browse/' + data[i].key); 
     a.text(data[i].name); 


     $("#list-of-project ul").append("<li>").append(a).append("</li>"); 


    } 

"données" voici un tableau JSON obtenu à partir de REST ayant l'attribut clé et nom. Cependant, en utilisant ceci, j'ai eu la sortie comme ceci unwanted result. L'élément n'est pas sur la même ligne que les points de liste. Je souhaite que le texte soit sur la même ligne que les points de liste. De l'aide??

Answer 1

Vous ne pouvez pas ajouter d'éléments partiels, comme simplement ouvrir et fermer des étiquettes LI.
Créer l'élément LI, puis ajoutez l'ancre à lui, puis l'ajouter à la UL

for (i=0; i <data.length ; i++){ 

    var a = $('<a />', { 
     href : 'https://example.com/browse/' + data[i].key, 
     text : data[i].name 
    }); 

    var li = $('<li />'); 

    $("#list-of-project ul").append(li.append(a)); 
} 

Notez que si data a de nombreux indices, vous devez faire la appending en dehors de la boucle, et ajouter tous les éléments à la fois

Answer 2

vous n'avez pas besoin d'ajouter les balises ouvertes et de fermeture comme vous faites, ajoutez simplement le a au li, puis ajouter le li au ul ...

for (i=0; i <data.length ; i++) { 
    var a = $('<a />'); 
    a.attr('href','https://example.com/browse/' + data[i].key); 
    a.text(data[i].name); 

    var li = $('<li/>'); 
    li.append(a); 

    $('#list-of-project ul').append(li); 


} 

Answer 3

for (i=0; i <data.length ; i++){ 

    var a = $('<a />'); 
    a.attr('href','https://example.com/browse/' + data[i].key); 
    a.text(data[i].name); 
    var li ="<li>"+a+"</li>" 
    $("#list-of-project ul").append(li); 
} 

Answer 4

<input type="test" id="inputName" /> 
<button id="btnName">Click me!</button> 

<ul class="justList"></ul> 

$('#btnName').click(function(){ 
    var text = $('#inputName').val(); 
    if(text.length){ 
     $('<li />', {html: text}).appendTo('ul.justList') 
    } 
});