Как добавить элемент списка в середину списка с помощью JQuery

У меня есть список с двумя элементами, я хочу добавить дополнительные элементы после первого элемента при загрузке содержимого. Как это делается? Я могу добавлять элементы, но они отображаются только в конце списка. Должен ли я вызывать или использовать массив элементов списка?

Сначала я создаю новый элемент списка (<li>), а затем заполняю элемент списка содержимым. Но я думаю, что мне нужно определить позицию элемента списка до или во время добавления элемента li.

if(x > 0){  
  $('<li></li>').attr('id','liAdult_'+x).appendTo($("ul:#ulAdultList"));
   //$("ul:#ulAdultList").add($('<li></li>').attr('id','liAdult_'+x)).after($('#liAdult_0'));
   $('<img/>').attr({'id':'imgAdultAvatar_'+x,'src':'./images/person_20x20.jpg','class':'imgAvatar','title':'The persons avatar','alt':'Avatar Adults'}).appendTo($('#liAdult_'+x));
   $('<span></span>').attr({'id':'sAdultFirstName_'+x,'class':'sAdultLine'}).html(xData.adults[x].personFirstName).appendTo($('#liAdult_'+x));
   $('<span></span>').attr({'id':'sAdultLastName_'+x,'class':'sAdultLine'}).html(xData.adults[x].personLastName).appendTo($('#liAdult_'+x));  
   $('<span></span>').attr({'id':'sAdultParent_'+x,'class':'sAdultLine'}).html(xData.adults[x].guardianRole).appendTo($('#liAdult_'+x));
   $('<span></span>').attr({'id':'sAdultCellPhone_'+x,'class':'sAdultLine'}).html(xData.adults[x].personCellPhone).appendTo($('#liAdult_'+x));
   $('<input/>').attr({'id':'personId_'+x,'type':'hidden'}).val(xData.adults[x].personId).appendTo($('#liAdult_'+x));
   $('<a></a>').attr({'id':'lnkAdultProfile_'+x,'href':'#','name':'lnkAdultProfile_'+x,'title':'Edit the adult profile'}).html('Profile').appendTo($('#liAdult_'+x));
}

jquery append html-lists
person nagli    schedule 23.07.2010    source источник
comment
Чуть не забыл, спасибо за ответы, помогли решить вопросы. Спасибо еще раз.   -  person nagli    schedule 06.08.2010

Ответы (2)


arrow_upward
2
arrow_downward

Чтобы добавить новый элемент после первого:

$('li:nth-child(1)').append('<li>New Item</li>');
person Daniel Moura    schedule 23.07.2010

arrow_upward
2
arrow_downward

Вместо .appendTo(), который добавит его в конец, как у вас:

$('<li></li>').attr('id','liAdult_'+x).appendTo($("ul:#ulAdultList"));

Используйте .insertAfter(), чтобы вставить его в нужное место, например:

$('<li></li>').attr('id','liAdult_'+x).insertAfter("#ulAdultList li:first");

Это вставит его после :first <li></li> в этом <ul>.

person Nick Craver    schedule 24.07.2010