Как добавить элемент списка в середине списка с помощью JQuery - PullRequest
Новая
       38

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

1 голос
/ 24 июля 2010

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

Сначала я создаю новый элемент списка (<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));
}

Ответы [ 2 ]

2 голосов
/ 24 июля 2010

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

$('li:nth-child(1)').append('<li>New Item</li>');
1 голос
/ 24 июля 2010

Вместо .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>.

...